特定のベンダープレフィックスのみを付けるには

前回はTwitter Bootstrapを題材として、mixinの実用的な例を見ていきました。今回はさらに発展させて

• 「この値がfooの場合に、この値をvarにする」

といった、条件分岐を入れたmixinを作ってみましょう。これをマスターすれば、より複雑なmixinを書くことができます。

まず、前回とりあげた参考のmixinを見てみましょう。

// LESS
.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

これは前回解説したように、各ベンタープレフィックスを付けた状態で、border-radiusをいっぺんに記述をしてしまうmixinでした。このような使い方はmixinとして大変有意義で典型的な使い方と言えるでしょう。

しかし、たとえば

• 「今回はiOSとAndroidだけに対応すればいいんだよな」

ということがありますよね。特にスマートフォンにおいて、容量の削減は常に考えなければいけないポイント。微々たるものとはいえ、使わないブラウザのコードが毎回生成されるのは気持ちいいものではありません。

それでは「特定のベンダープレフィックスのみを付ける」方法はないのでしょうか？

一般的なプログラミング言語では「if文を使う」ということを考えるでしょう。LESSの場合も、同様の機能があります。

LESSの場合、ifではなく、whenという構文を用います。

先ほど書いた-wekit／-moz／-o／-ieの全部に対応したmixinで、「⁠-webkitのみに対応する」という出し分けをしてみましょう。

「webkitに対応して、mozには対応しない」という処理を書く

まず、「⁠fooがvarのとき」という指定を「when」で行います。先ほどの.border-radiusのmixinを元に、「⁠もしwebkitだったら」という処理を入れてみましょう。

// LESS
@webkit: true;
@moz: false;

.border-radius(@radius)when(@webkit) {
     -webkit-border-radius: @radius;
}
.border-radius(@radius)when(@moz) {
     -moz-border-radius: @radius;
}
.border-radius(@radius) {
     border-radius: @radius;
}

/* Compiled CSS */
div {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

このコードでは、ベンダープレフィックスで

• 「webkitに対応して、mozには対応しない」

という処理を書いています。新しい書き方が少し多いので、順を追ってみていきましょう。

@webkit: true;
@moz: false;

まず、@webkitにtrue（真⁠）⁠、@mozにfalse（偽）値をそれぞれ定めて、

• 「webkitに対応して、mozには対応しない」

と定義します。今後状況に応じて、そのオンオフを随時切り替えられるようにしましょう。

.border-radius(@radius)when(@webkit) {
     -webkit-border-radius: @radius;
}
.border-radius(@radius)when(@moz) {
     -moz-border-radius: @radius;
}

when(@webkit)で「webkitの値がtruneの時」という条件分岐をしています。そして、その中には-webkitのプレフィックスが付いたCSSが書かれています。

同様に、when(@moz）で-mozが付いたCSSを書いています。

今回、@webkitはtrueなのでそのまま生成されます。

一方@mozの値はfalseなので、この中のCSSは無視されます。

.border-radius(@radius) {
     border-radius: @radius;
}

このように、whenを付けず条件分岐していないものに関しては、@webkitや@mozの値に限らず、CSSが追加されます。今回は、こちらにベンダープレフィックスの付いていない、CSS3準拠の記述をしました。

つまりこのmixinでは

• webkitは対応／mozは非対応
• webkitに対応している（@webkitがtrine）場合
  • →-webkit-border-radius: @radius;
• mozに対応している（@mozがtrine）場合
  • →-moz-border-radius: @radius;
• どちらの場合でも border-radius: @radius;

という一連の処理をしています。

その結果、以下のように、必要としている-webkitプレフィックスが付いたものと、CSS3準拠の記述のみが、キレイに1つのセレクタに納められました。

/* Compiled CSS */
div {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

もちろん、「⁠やはり-mozにも対応したい」となった場合は、@mozの値を「true」にするだけで、生成されるmixinはすべて-mozに対応させることができます。

PCとMobileでベンダープレフィックスを分けるには

同様の手順で、以下の想定で、PC用とMobileでプレフィックスを分ける処理を見ていきましょう。

• Mobileでは-webkitのみ対応
• Mobile以外のものでは、すべてのブラウザに対応すべく、-webkit/-moz/-o/-msを付ける

// LESS
@media: pc;

.border-radius(@radius)when(@media = mobile){
     -webkit-border-radius: @radius;
}
.border-radius(@radius)when not(@media = mobile){
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
     -o-border-radius: @radius;
     -ms-border-radius: @radius;
}
.border-radius(@radius) {
     border-radius: @radius;
}

/* Compiled CSS */
div {
     .border-radius(5px);
}

こちらも上から順を追って見てみましょう。

// LESS
@media: pc;

まず、@mediaの値をpcとします（mobile以外の値ならば何でもかまいません⁠）⁠。

.border-radius(@radius)when(@media = mobile){
     -webkit-border-radius: @radius;
}

ここでは「@mediaの値がmobileだった場合」という処理をしています。

先ほどは、値がtrue／falseの真偽値のみだったため、比較する文字列を入れずに条件分岐していました。一方今回は文字列を想定したため、「⁠=（イコール⁠）⁠」を用いて比較しています。

この記述では、「⁠@mediaの値がmobileだった場合」に、-webkitプレフィックスが付いたCSSが出力されます。今回、@mediaの値は「pc」となっているので、この条件には当てはまりません。

.border-radius(@radius)when not(@media = mobile){
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
     -o-border-radius: @radius;
     -ms-border-radius: @radius;
}

ここで新しく「when not」という書き方が出てきました。これはwhenとは逆で「@mediaがmobileではなかった場合」という条件分岐です。

@mediaの値はpcなので、「⁠mobile以外」という条件に当てはまり、この内容が出力されます。

.border-radius(@radius) {
     border-radius: @radius;
}

最後に、先程と同様、どちらの条件にも適用するCSS3準拠の記述を書いておしまいです。

なお、今回の処理では、when(@media = mobile)の分岐は書かず、共通部分に-webkitを追加してしまっても同じ処理ができます。しかし、後から

• 「mobileの対応ブラウザを増やしたい」

などの編集が発生することを想定して、分けてみました。こちらはケースバイケースで対応すれば問題ないと思います。

このように、mixinを活用すると、かなり複雑な処理まで書けるようになります。最初に書くのは大変かもしれませんが、一度書いてしまえばその後はどのサイトでも使いまわすことができます。ぜひ自分にあったmixinを集めていってください。

次回は、さらにスマートフォンコーディングらしく、解像度別にCSSを書き分けるmixinを作っていきます。お楽しみに。