可以减少带有哈希的循环吗？

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 中是否有一种方法可以使用一种 array 或 hash 并对其进行循环以生成所需的代码？

数组或hash应该只包含left、right、center、justify的stings

如果可能的话，另一种选择是循环遍历我的屏幕尺寸，例如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();