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

第6回 mixinを作る(初歩編)

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

Twitter Bootstrapからmixinの使い方を読み解く

前回まででLESSの主だった記法はすべて紹介しました。

今回からはLESSの真骨頂であるmixinの作成に入ります。

まずはおさらいとして,第2回のmixinのサンプルコードを見てみましょう。

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

#header {
  .border-radius(4px);
}


/* Compiled CSS */
#header {
  border-radius: 4px;
  -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
}

このように,CSS3のベンダープリフィックスをまとめておくことにより,簡単に各ブラウザに対応したCSS3をまとめて宣言できるだけでなく,将来的に仕様の変更やベンダープリフィックスが不要になった際も,mixinを変更するだけで済みます。スピードと保守性を両立することができますね。

Twitter社が提供しているTwitter Bootstrapは,このような使い方を非常にうまく利用しています。

今回はそのTwitter Bootstrapで提供しているmixin.lessをかいつまんで読み解いてみましょう。

通常のダウンロードページではLESSから生成されたCSSファイルしか提供していないのですが,Twitter社のgithubページより生成前のLESSファイルをダウンロードすることができます。

ベンダープリフィックスをまとめる

mixin.lessでCSSのベンダープリフィックスをどのようにまとめているのか,おもだったものを見ていきましょう。

border-radius

これは先にご紹介したものと同様です。

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

border-radiusの一箇所のみを指定

border-radiusの一箇所のみを指定する場合,特にwebkitとmozで縦と横の指定順が違うので,ミスをしがちです。

ブラウザ独自実装の非常に困った点なのですが,こういった記述こそmixinとして非常に有効です。

// Single Corner Border Radius
.border-top-left-radius(@radius) {
  -webkit-border-top-left-radius: @radius;
      -moz-border-radius-topleft: @radius;
          border-top-left-radius: @radius;
}
.border-top-right-radius(@radius) {
  -webkit-border-top-right-radius: @radius;
      -moz-border-radius-topright: @radius;
          border-top-right-radius: @radius;
}
.border-bottom-right-radius(@radius) {
  -webkit-border-bottom-right-radius: @radius;
      -moz-border-radius-bottomright: @radius;
          border-bottom-right-radius: @radius;
}
.border-bottom-left-radius(@radius) {
  -webkit-border-bottom-left-radius: @radius;
      -moz-border-radius-bottomleft: @radius;
          border-bottom-left-radius: @radius;
}

border-radiusの一辺を指定

これは前述のSingle Corner Border Radiusをさらに応用したものです。

CSSでは1箇所ずつしか角丸を記述できません。しかし,先ほどのmixinを以下のように入れ子にして,1回の指定で一辺(左上と右上/左上と左下など)の角丸を指定しています。

// Single Side Border Radius
.border-top-radius(@radius) {
  .border-top-right-radius(@radius);
  .border-top-left-radius(@radius);
}
.border-right-radius(@radius) {
  .border-top-right-radius(@radius);
  .border-bottom-right-radius(@radius);
}
.border-bottom-radius(@radius) {
  .border-bottom-right-radius(@radius);
  .border-bottom-left-radius(@radius);
}
.border-left-radius(@radius) {
  .border-top-left-radius(@radius);
  .border-bottom-left-radius(@radius);
}

もちろんmixinの入れ子を用いずに書くこともできます。しかし,記述が複雑化するだけでなく,CSSの仕様変更などに対応する際の工数も増え,保守性も悪くなってしまいます。以下のことを常に注意するようにしましょう。

  • mixin自体のコードのシンプル化
  • 生成されるCSSのシンプル化
  • LESSファイル全体の保守性

その他

その他,CSS3のベンダープリフィックスをまとめるためのTwitter Bootstrapオリジナルのmixinとしては下記のようなものがあります。

  • box-shadow
  • transition
  • rotate
  • scale
  • translate
  • skew
  • translate3d
  • backface-visibility
  • background-clip
  • background-size
  • box-sizing
  • user-select

著者プロフィール

宇野雄(うのゆう)

UI・UXデザイナー。

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

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

Twitter:@saladdays

コメント

コメントの記入