Question

在开始拍摄之前，我不得不说less我是全新的，所以请不要拍！：）

我想做的是根据我的屏幕尺寸编写一些用于对齐文本的类，而不是手动编写代码我想使用less的循环（如果它当然可以生成我的课程。

所以我想做的是这样的事情：

.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中有一种方法可以使用一种数组或哈希并在其上循环以生成所需的代码吗？

数组或哈希应仅包含叮咬left，right，center，justify

另一种选择，如果可能的话，也可以遍历我的屏幕尺寸，例如sm，md，lg。

非常感谢。

Answer 1

最后我找到了解决方案并且它是以下内容：

@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;
@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();

可以用较少的哈希循环吗？

1 个答案: