LESSで3倍ラクするスマートフォンコーディング

第7回 mixinを作る(応用編)

この記事を読むのに必要な時間:およそ 3 分

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

前回は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に対応させることができます。

著者プロフィール

宇野雄(うのゆう)

UI・UXデザイナー。

ヤフー株式会社にて,主にスマートフォンWebとアプリのUI・UX設計/デザイン/コーディングを担当。

全く新しいモノづくりよりも,既にあるモノを新しい視点でとらえるデザインが好き。犬派。

Twitter:@saladdays

コメント

コメントの記入