BootstrapのLESSで使われているループを応用してCSSユーティリティを作成


CSSでマージンをつけるだけのユーティリティ、みなさんも使用されていることがあるかと思います。

.mb10 {
margin-bottom: 10px;
}
.mb20 {
margin-bottom: 20px;
}

・・・これをまあ続けていくわけですけど、昔は画面の大きさもさほど大きくなかったしまあmb40とかmt40くらいまであればいいかなーと考えてましたが、最近は解像度もでかいし、デザイン性もいいサイトもいっぱいあったりして、マージンの使い方も美しいんですよね。

なもんで、最近は自分の場合は.mb100くらいまで用意します。
しかも5px刻みで。

なのでCSSをあらかじめ準備しとかないとイチから書いてると途方も無いことになる。(ってほどではないけど)

ほんでここから本題。
BootstrapのLESSにはガード(when)を利用してループのような技法を使っているところがあるんだとか。

で、こいつを利用してこのマージンのCSSユーティリティを実際に書いてみた。
・・・んだけど、NetBeansがエラーを出しまくる。

紆余曲折を経て何とかエラーなくコンパイルできたのが以下。

.aaa(@i) when not (@i < 101) {}
.aaa(@i) when (@i < 101) {
    @pixel: “@{i}px”;
    .mb@{i} {
        margin-bottom: ~”@{pixel}”;
}
    .mt@{i} {
        margin-top: ~”@{pixel}”;
}
    .aaa(@i + 5);
}
.aaa(5);

ポイントは、文字列を変数に入れた場合、””(ダブルクォーテーション)が吐き出されてしまい、

.mb10 {
margin-bottom: “10px”; // ←修正しました!
}

【追記】
Facebookでやまだ屋の山田さんから「20px」は「10px」間違いだよね?とご指摘がありました。
修正しました、ありがとうございます!

こんな感じになる。
これを防ぐためには文字列が格納された変数を””でくくり、コンパイルしたら変数が展開されるように@の後ろを{}でくくる。そして最初にくくった””をエスケープするため~(チルダ)をつける。

ややっこしいですけどコードが超短くなってなんかいい感じになります(笑)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.