Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/swift/17.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 更少的哈希循环是可能的吗?_Css_Less_Less Mixins - Fatal编程技术网

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
中是否有一种方法可以使用一种数组或散列并在其上循环以生成所需的代码

数组或散列应该只包含stings
left
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();