css - 可以减少散列循环吗？

Question

在开始拍摄我之前，我必须说我对less完全陌生，所以请不要拍摄! :)

我想做的是编写一些类来根据屏幕尺寸对齐文本，而不是手动编写代码，我想使用 less 循环(当然如果可能的话)生成我的类(class)。

所以我想做的是这样的:

.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, 对齐

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