Css 更少的哈希循环是可能的吗?
在开始拍摄我之前,我必须说我是全新的Css 更少的哈希循环是可能的吗?,css,less,less-mixins,Css,Less,Less Mixins,在开始拍摄我之前,我必须说我是全新的更少的,所以请不要拍摄!!:) 我想做的是编写一些类,根据屏幕大小对齐文本,而不是手工编写代码,我想使用更少的循环来生成类(当然,如果可能的话) 所以我想做的是这样的: .text-sm-left { text-align : left; } .text-sm-right { text-align : right; } .text-sm-center { text-align : center; } .text-sm-justif
更少的,所以请不要拍摄!!:)
我想做的是编写一些类,根据屏幕大小对齐文本,而不是手工编写代码,我想使用更少的循环来生成类(当然,如果可能的话)
所以我想做的是这样的:
.text-sm-left {
text-align : left;
}
.text-sm-right {
text-align : right;
}
.text-sm-center {
text-align : center;
}
.text-sm-justify {
text-align : justify;
}
但正如我已经说过的,我不喜欢使用手写代码
那么,在less
中是否有一种方法可以使用一种数组或散列并在其上循环以生成所需的代码
数组或散列应该只包含stingsleft
,right
,center
,justify
如果可能的话,另一个选项是循环我的屏幕大小,比如sm
,md
,lg
非常感谢。我终于找到了解决方案,具体如下:
@align: left, right, center, justify;
/* Small devices (tablets, 768px and up) */
@media (min-width : @screen-sm-min)
{
.createMediaQueries(@iterator:1) when (@iterator <= length(@align))
{
@direction: extract(extract(@align, @iterator), 1);
.text-sm-@{direction}
{
text-align : @direction !important;
}
.createMediaQueries((@iterator + 1));
}
.createMediaQueries();
}
/* Medium devices (desktops, 992px and up) */
@media (min-width : @screen-md-min)
{
.createMediaQueries(@iterator:1) when (@iterator <= length(@align))
{
@direction: extract(extract(@align, @iterator), 1);
.text-md-@{direction}
{
text-align : @direction !important;
}
.createMediaQueries((@iterator + 1));
}
.createMediaQueries();
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width : @screen-lg-min)
{
.createMediaQueries(@iterator:1) when (@iterator <= length(@align))
{
@direction: extract(extract(@align, @iterator), 1);
.text-lg-@{direction}
{
text-align : @direction !important;
}
.createMediaQueries((@iterator + 1));
}
.createMediaQueries();
}
@align:left,right,center,justify;
/*小型设备(平板电脑、768px及以上)*/
@介质(最小宽度:@screen sm min)
{
.createMediaQueries(@iterator:1)在(@iterator dunno关于LESS,但SASS中肯定有循环。如果不是LESS中的循环,我会感到惊讶。我想过去我已经在SASS
中使用过此功能,我在LESS
中没有看到任何相关示例,这就是为什么我要求这样做。是的,第二个解决方案更好,但您可能不需要外部解决方案extract(extract(@screen,@mediatierator),1)中的extract函数;
因为据我所知,@screen-[xx]-min
变量只有一个值(根据您使用的1来判断)。您还可以使用屏幕大小列表。
@align: left, right, center, justify;
@screen : @screen-sm-min, @screen-md-min, @screen-lg-min;
@sizes : sm, md, lg;
.createMediaQueryRules(@mediaIterator:1) when (@mediaIterator <= length(@screen))
{
@mediaQuery : extract(extract(@screen, @mediaIterator), 1);
@size : extract(extract(@sizes, @mediaIterator), 1);
@media (min-width : @mediaQuery)
{
.createTextAlignRules(@iterator:1) when (@iterator <= length(@align))
{
@direction: extract(extract(@align, @iterator), 1);
.text-@{size}-@{direction}
{
text-align : @direction !important;
}
.createTextAlignRules((@iterator + 1));
}
.createTextAlignRules();
}
.createMediaQueryRules((@mediaIterator + 1));
}
.createMediaQueryRules();