という処理を入れてみましょう。
このコードでは、ベンダープレフィックスで
という処理を書いています。新しい書き方が少し多いので、順を追ってみていきましょう。
まず、@webkitにtrue(真)、@mozにfalse(偽)値をそれぞれ定めて、
と定義します。今後状況に応じて、そのオンオフを随時切り替えられるようにしましょう。
when(@webkit)で「webkitの値がtruneの時」という条件分岐をしています。そして、その中には-webkitのプレフィックスが付いたCSSが書かれています。
同様に、when(@moz)で-mozが付いたCSSを書いています。
今回、@webkitはtrueなのでそのまま生成されます。
一方@mozの値はfalseなので、この中のCSSは無視されます。
このように、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つのセレクタに納められました。
もちろん、「やはり-mozにも対応したい」となった場合は、@mozの値を「true」にするだけで、生成されるmixinはすべて-mozに対応させることができます。
PCとMobileでベンダープレフィックスを分けるには
同様の手順で、以下の想定で、PC用とMobileでプレフィックスを分ける処理を見ていきましょう。
- Mobileでは-webkitのみ対応
- Mobile以外のものでは、すべてのブラウザに対応すべく、-webkit/-moz/-o/-msを付ける
こちらも上から順を追って見てみましょう。
まず、@mediaの値をpcとします(mobile以外の値ならば何でもかまいません)。
ここでは「@mediaの値がmobileだった場合」という処理をしています。
先ほどは、値がtrue/falseの真偽値のみだったため、比較する文字列を入れずに条件分岐していました。一方今回は文字列を想定したため、「=(イコール)」を用いて比較しています。
この記述では、「@mediaの値がmobileだった場合」に、-webkitプレフィックスが付いたCSSが出力されます。今回、@mediaの値は「pc」となっているので、この条件には当てはまりません。
ここで新しく「when not」という書き方が出てきました。これはwhenとは逆で「@mediaがmobileではなかった場合」という条件分岐です。
@mediaの値はpcなので、「mobile以外」という条件に当てはまり、この内容が出力されます。
最後に、先程と同様、どちらの条件にも適用するCSS3準拠の記述を書いておしまいです。
なお、今回の処理では、when(@media = mobile)の分岐は書かず、共通部分に-webkitを追加してしまっても同じ処理ができます。しかし、後から
などの編集が発生することを想定して、分けてみました。こちらはケースバイケースで対応すれば問題ないと思います。
このように、mixinを活用すると、かなり複雑な処理まで書けるようになります。最初に書くのは大変かもしれませんが、一度書いてしまえばその後はどのサイトでも使いまわすことができます。ぜひ自分にあったmixinを集めていってください。
次回は、さらにスマートフォンコーディングらしく、解像度別にCSSを書き分けるmixinを作っていきます。お楽しみに。