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、一種の配列またはハッシュを使用してループする方法はありますか?

配列またはハッシュにはleft、文字列、、、、のみが含まれている必要があります。rightcenterjustify

別のオプションとして、可能であれば、 、 、 のよう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 に答える