CSSで次のような同じようなクラスをたくさん定義したいときがあります。あれ、ない？とりあえず、自分の環境でそんなことがありました。
.color_beige {
background-image: url('/img/beige.png');
}
.color_beige:active {
background-image: url('/img/beige_on.png');
}
.color_black {
background-image: url('/img/black.png');
}
.color_black:active {
background-image: url('/img/black_on.png');
}
.color_blue {
background-image: url('/img/blue.png');
}
.color_blue:active {
background-image: url('/img/blue_on.png');
}
/* ・・・ 以下同じようなクラス定義がたくさん ・・・ */
こういう同じようなコード、エディタのマクロ機能などを使えば量産も可能ですが、面倒くさいですし、あとあとメンテナンスが大変です。
そこでLESSを使うと、変数を使ってセレクタを作ることができます。とりあえず、こんな感じ。
@colors: beige, black, blue, brown, gold, gray, green, navy, orange, pink, purple, red, silver, white, yellow;
.myMixin(@whichPseudo) {
@pseudo-selector: ~".color_@{whichPseudo}";
&@{pseudo-selector} {
background-image: url('/img/@{whichPseudo}.png');
&:active{
background-image: url('/img/@{whichPseudo}_on.png');
}
}
}
.loop (@i) when (@i > 0) {
.loop(@i - 1);
.myMixin(extract(@colors, @i));
}
.loop (length(@colors));
コード自体の長さはそれほど変わりませんが、重複がかなり減りました。それではこの仕組みについて、以下で解説します。
なお、自分が使用しているのは、Brackets(バージョン1.2)のLESS AutoCompile(バージョン1.1.8)です。他の環境だとコンパイルエラーが出るかもしれませんのでご注意を。
セレクタの為の変数を作る
まずは、作成したいセレクタの名前を変数に列挙します。上記lessコードの一行目。
@colors: beige, black, blue, brown, gold, gray, green, navy, orange, pink, purple, red, silver, white, yellow;
lessの言語仕様には、一応リスト型変数というものがあります。実体はただのカンマ区切り文字列で、これをこのまま文字列として表示することもできるのですが、lessの組み込み関数、lengthとextractでリストのように扱うことができます。これをループ処理と組み合わせて使うことで、セレクタを量産していきます。
ループで使用するmixinを定義する
実はこの辺よくわかってないのですが、mixin機能を使って生成するセレクタを定義します。以下のサイトを参考にしました。
.myMixin(@whichPseudo) {
@pseudo-selector: ~".color_@{whichPseudo}";
&@{pseudo-selector} {
background-image: url('/img/@{whichPseudo}.png');
&:active{
background-image: url('/img/@{whichPseudo}_on.png');
}
}
}
この場合、冒頭の@pseudo-selector: ~".color_@{whichPseudo}";で指定したとおりのセレクタ(と、そのオブジェクトがアクティブなときのセレクタ)が作成されます。
ループ処理
そしてループ処理です。ループ処理の中で先ほど定義したmixinを呼び出すことで、実際のセレクタを作成します。
.loop (@i) when (@i > 0) {
.loop(@i - 1);
.myMixin(extract(@colors, @i));
}
.loop (length(@colors));
最後の.loop (length(@colors));で、@colorsに指定した配列の要素ぶん、ループを実行します。結果的に、リストに含まれるすべての要素を使ったセレクタが生成されます。