Bootstrapを題材として,mixinの実用的な例を見ていきました。今回はさらに発展させて「この値がfooの場合に,この値をvarにする」といった,条件分岐を入れたmixinを作ってみましょう。これをマスターすれば,より複雑なmixinを書くことができます。前回とりあげた参考のmixinを見てみましょう。@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だったら」という処理を入れてみましょう。5px;}このコードでは,ベンダープレフィックスで「webkitに対応して,mozには対応しない」という処理を書いています。新しい書き方が少し多いので,順を追ってみていきましょう。false;まず,@webkitにtrue(真⁠)⁠,@mozにfalse(偽)値をそれぞれ定めて,「webkitに対応して,mozには対応しない」と定義します。今後状況に応じて,そのオンオフを随時切り替えられるようにしましょう。@radius;}when(@webkit)で「webkitの値がtruneの時」という条件分岐をしています。その中には-webkitのプレフィックスが付いたCSSが書かれています。同様に,when(@moz)で-mozが付いたCSSを書いています。今回,@webkitはtrueなのでそのまま生成されます。@mozの値はfalseなので,この中のCSSは無視されます。@radius;}このように,whenを付けず条件分岐していないものに関しては,@webkitや@mozの値に限らず,CSSが追加されます。今回は,こちらにベンダープレフィックスの付いていない,CSS3準拠の記述をしました。@radius;という一連の処理をしています。その結果,以下のように,必要としている-webkitプレフィックスが付いたものと,CSS3準拠の記述のみが,キレイに1つのセレクタに納められました。5px;}もちろん,「⁠やはり-mozにも対応したい」となった場合は,@mozの値を「true」にするだけで,生成されるmixinはすべて-mozに対応させることができます。mixin著者プロフィール宇野雄(うのゆう)UI・UXデザイナー。ヤフー株式会社にて,主にスマートフォンWebとアプリのUI・UX設計/デザイン/コーディングを担当。新しいモノづくりよりも,既にあるモノを新しい視点でとらえるデザインが好き。1位は,LESS入門とSassとの比較,気になるネタは,GALAPAGOSは撤退しない。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。業務を改善する情報共有の仕掛け~DevOpsの実現,RPAの導入に向けて~ソフトウェア開発の業務改善をテーマに,DevOps実現の手順やそれを助けるツールとの連携,RPAによる社内ドキュメントの管理や効率化について解説します。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。