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

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

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

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を作っていきます。お楽しみに。

コラム なぜ条件分岐はifではないのか?

JavaScriptを始めとしたプログラム言語では,条件分岐の際に「if」⁠else」を使うものが多いようです。しかしLESSでは,whenという構文を用いています。

LESSはJavaScriptの影響を強く受けています。にもかかわらず,なぜif文を採用しなかったのでしょうか?

理由は,CSS3の@media queryという,解像度などによってプロパティの出し分けをするための宣言書式に合わせたためだそうです。LESS自体は,あくまでJavaScriptではなく,CSSに準拠した拡張書式であるという姿勢の表れとも言えそうです。

著者プロフィール

宇野雄(うのゆう)

UI・UXデザイナー。

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

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

Twitter:@saladdays