0

LESS パーサーを使用して CSS コードを作成するある種のループ関数を作成することにより、次のコードをより保守しやすくしたいと思います (ただし、理解できなくてもかまいません)。

.box {
        &.ebay {
            background-color:@ebay-color;
            h2, p{
                color: lighten(@ebay-color, 15%);
            }
        }
        &.google-shopping {
            background-color:@google-shopping-color;
            h2, p{
                color: lighten(@google-shopping-color, 15%);
            }
        }
        &.website {
            background-color:@website-color;
            h2, p{
                color: lighten(@website-color, 15%);
            }
        }
        &.feed {
            background-color: @feed-color;
            h2, p{
                color: lighten(@feed-color, 15%);
            }
        }
        &.twitter {
            background-color: @twitter-color;
            h2, p{
                color: lighten(@twitter-color, 15%);
            }
        }
        &.facebook {
            background-color:@facebook-color;
            h2, p{
                color: lighten(@facebook-color, 15%);
            }
        }
    }

A)すべての色(ebay、google-shoppingなど)をループしてから、適切な色でスタイルを出力する別の関数があれば、それは素晴らしいことです。

質問

私の色を配列に保存し、上記の 6 つのブロックのいずれかのスタイルを受け入れ、各ブロックで (色のパラメーターを使用して) 同じスタイルを生成する機能を持たせる方法はありますか? そして、この方法は何ですか?

4

2 に答える 2