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 つのブロックのいずれかのスタイルを受け入れ、各ブロックで (色のパラメーターを使用して) 同じスタイルを生成する機能を持たせる方法はありますか? そして、この方法は何ですか?