0

複数のセクションを持つプロジェクトに取り組んでいます。セクションに応じて、そのセクション内の要素の色が異なります。LESS ファイルを通じて、これらすべての可能性を次のように定義しています。

a{
    .section_what &{
        color: darken(@what,10%);
    }
    .section_where &{
        color: darken(@where,10%);          
    }
    .section_who &{
        color: darken(@who,10%);
    }
    .section_post &{
        color: darken(@post,10%);           
    }
    .section_events &{
        color: darken(@events,10%);         
    }
    .section_deals &{
        color: darken(@deals,10%);          
    }
}

これは、物事を行うための最も合理的な方法ではないようです。この方法を使用すると、このセクションのリストをかなり繰り返さなければなりません。そのため、セクションによって変更されるすべての要素には、このセクションのリストが定義されている必要があります。場合によっては、その色、背景色、境界線の色など...

より良い方法はありますか？

4

1 に答える 1

1

LESS では、次のようなより一般的なコードで取得できます。

@what:   #111;
@where:  #222;
@who:    #333;
@post:   #444;
@events: #555;
@deals:  #666;

@items: what,
        where,
        who,
        post,
        events,
        deals;

@items-count: 6;

.sections() {
    .-(@items-count);
    .-(@i) when (@i > 0) {
        .-((@i - 1));

        @name: extract(@items, @i);
        .section_@{name} & {
            color: darken(@@name, 10%);
        }
    }
}

a {
    .sections();
}

b {
    .sections();
}

または、これらの変数が他に必要ない場合は、さらに良い:

@items: what   #111,
        where  #222,
        who    #333,
        post   #444,
        events #555,
        deals  #666;

.sections() {
    .-(length(@items));
    .-(@i) when (@i > 0) {
        .-((@i - 1));

        @item: extract(@items, @i);
        @name: extract(@item, 1);
        .section_@{name} & {
            color: darken(extract(@item, 2), 10%);
        }
    }
}

a {
    .sections();
}

b {
    .sections();
}

かなり冗長に見えますが、これに値するカスタマイズのレベルがあると思います。このlength関数は LESS 1.5.x でのみ使用できることに注意してください。以前のバージョンでは、最初の例のように定義済みのカウント変数を使用できます。

さらに別のアプローチ（「コピーアンドペースト」スタイルを好む場合）：

@what:   #111;
@where:  #222;
@who:    #333;
@post:   #444;
@events: #555;
@deals:  #666;

.item(@name) {
    .section_@{name} & {
        color: darken(@@name, 10%);
    }
}

a {
    .item(what);
    .item(where);
    .item(who);
    .item(post);
    .item(events);
    .item(deals);
}

PS

そのため、セクションによって変更されるすべての要素には、このセクションのリストが定義されている必要があります。場合によっては、その色、背景色、境界線の色など...

プロパティの「カスタマイズ ポイント」をさらに追加することもできますが、それは、それらのセクションと CSS プロパティがどの程度正確に相互に結びついているかによって異なります...わかりにくい）。基本的にキーは「リスト/ループ」、「ミックスイン/抽象化」などです。

于 2013-11-02T20:03:43.997 に答える