2

在开始拍摄我之前，我必须说我是全新的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使用一种数组或哈希并循环它以生成所需的代码？

数组或哈希应该只包含stings left, right, center,justify

如果可能的话，另一种选择是也循环遍历我的屏幕尺寸，例如sm, md, lg.

非常感谢。

4

1 回答 1

2

最后我找到了解决方案，它如下：

@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();
于 2015-02-06T14:51:53.507 回答