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

第2回 LESS記法を身につける(初級編)

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

ミックスイン ~CSSプロパティの組み合わせをかんたんに呼び出す

ミックスイン(mixin)とは,あらかじめ宣言しておいたCSSプロパティの組み合わせを呼び出すことができる仕組みです。プログラミングでいう関数のようなものです。

以下の例は,.borderedという名前で,一見普通のclass宣言をしているように見えます。しかしその後のセレクタの中で.bordered;と記述することにより,はじめの.borderedの中身を呼び出しています。これはidでもかまいません。

// LESS
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

/* Compiled CSS */
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

ミックスインは「普段どおりclassやidで記述した内容を,もう一度かんたんに呼び出す方法」と考えられます。

ただ,LESSでは通例として,ミックスインとして宣言したclassやidは,HTMLの中にidやclassとして記述しないことが多いようです。それをしてしまうならば,結局そのプロパティを適用したい箇所のHTMLタグにそのclassやidを入れてしまうのと同じことだからです(idはそもそも1箇所でしか使えませんが⁠⁠。

そして変数の項でもお話ししたように,結果として保守性が失われてしまいます。

そういった意味で,変数とミックスインの内容/名前には,idやclassとして「宣言すべきでない」色や形,見た目にかかわるもの(margin/font-size/border)などを直接指定するのが適切といえます。

ミックスインに引数を渡す

先に「ミックスインは関数のようなもの」と説明しました。そのイメージどおり,一般的なプログラム言語のように,ミックスインを呼び出す際に引数を指定して,生成されるCSSの値を変動させることができます。

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

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


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

具体的な使い方としてまず最初に上げられるのが「-webkit」などのベンダープレフィックスを指定することです。

今回の連載ではスマートフォンサイトのコーディングのお話を中心にしているので,iOSとAndroidのみをターゲットにする場合は「-webkit」しか利用せず,忘れがちなところではあります。

しかし,今後のブラウザの仕様変更などを加味して,⁠-webkit」のプレフィックスを付けたものだけではなく,プレフィックスを抜いたものも同時に指定するとよいでしょう。

最近のスマートフォン(の搭載ブラウザ)は,すでにborder-radiusはプレフィックスなしで対応しています。

引数のデフォルト値を設定する

「引数を指定しなかった場合はこのように動作してほしい」というコーディングをするときに必要なのが,デフォルト値の設定です。

以下のように,ミックスインの変数の後に「:」を入れてデフォルト値を入れることにより,場合に応じて生成するCSSの内容を変えることができます。

  • 引数を指定しなかった場合 ⇒ デフォルト値を使ってCSSを生成
  • 引数を指定した場合 ⇒ 指定した値を使ってCSSを生成
// LESS
.border-radius (@radius:4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

#header {
  .border-radius();
}

#content {
  .border-radius(5px);
}

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

引数を複数指定する

ミックスインの引数は複数指定することできます。

デフォルト値の指定と組み合わせることにより,以下のような記述も可能になります。

//LESS
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @x @y @blur@color;
  -webkit-box-shadow: @x @y @blur@color;
}
.box-shadow(2px, 5px);

ミックスインはLESSを活用する上でキモとなる機能です。利用頻度の高い記述をいかに使い回しが利きやすい形で書くかがカギになります。具体的な活用方法は次回以降に紹介していきます。

演算

LESSでは,四則演算を用いて値を指定することができます。単純に自分で計算するのが面倒くさいときにも役立ちますが,一番の活用場面は変数値を用いて計算するときです。

たとえば以下の変数が宣言してあったとします。

@baseFontSize: 12px;

以下のように,この変数を基準値として計算すれば,@basefontSizeの値を変更するだけで,すべての文字サイズの比率を保ったまま文字の大きさを変更することができます。

//LESS
h1 {
  font-size: @baseFontSize*2;
}

筆者は「デフォルトの余白の1.5倍」など,marginサイズの計算などにもよく活用しています。

コメント ~CSSより少ない容量に

LESSでは,CSSのコメント(/* ~ */)に加えて,⁠//」を行頭につける形でもコメントを付けられます。

これはJavaScriptなどでも用いられる記法ですが,こちらはコンパイルした際に「//」のコメントが生成対象から外れ,リソースの削減になるのがメリットです。

コメントは同じコードを読む/メンテナンスするチームメンバーに向けたものなので,生成結果には不要です。Copyright記述など,意図して残したい特殊な例を除き,こちらのコメントを活用するといいでしょう。

//LESS
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

インポート ~ほかのCSSを読み込む

CSSでも「@import: url()」で他のCSSを読み込むことができますが,LESSの@importは解釈の仕方が微妙に異なります。

CSSの「@import: url()」
⇒あくまで外部から読み出すCSSのファイルを追加しただけ。指定したCSSは別ファイルとしてリクエストされる
LESSの「@import」
⇒生成の際に「@import」を貼りつけた箇所にそのままCSSを貼りつけたような状態になり,1つのファイルとして扱われる

CSSの「@import:url()」は,パフォーマンス的な問題もあり,避けられる傾向にあります。一方,LESSの「@import」ではそのような心配がありません。

そのため,積極的に機能ごとにCSSを分割して,コンパイル時にひとまとめに結合すると良いでしょう。そうすれば,複数人で同時作業する際も,ファイルレベルでのコンフリクト(競合)を避けることができます。

以上,LESSのごく基礎,かつ「本当に重要な点」のみに絞ってお伝えしましたが,今回の内容だけでも既存のCSSと比べてはるかに速く,効率的に,そしてわかりやすく,CSSを記述できるようになったと思います。

これだけでも,今までの1.5倍速くらいのスピードで書けてしまうのではないでしょうか。

LESSの魅力はこれだけではありません。次回以降は,2倍,3倍のスピードでCSSを書けるようになるためのさらに踏み込んだ使い方,細かいTIPS,ハマりどころなどを,実例を交えて紹介していきます。ぜひお楽しみに!

著者プロフィール

宇野雄(うのゆう)

UI・UXデザイナー。

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

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

Twitter:@saladdays