最低限おさえておくべき6つの記法

前回はLESSが解決してくれる悩みと、less.jsの利用法をご紹介しました。

今回はいよいよ実際にLESSを書いていきましょう。

とはいえ、LESSの記法の中でもよく使われるものと、あまり使われないものがあります。今回は初級編として、LESSを使うなら必ず覚えておきたい記法と、その活用法、注意点などを見ていきましょう。

LESSで基本として押さえておくべきは下記6点です。

• ネスト
• 変数
• ミックスイン
• 演算
• コメント
• インポート

これだけでもCSSのコーディング速度が1.5倍くらいになり、十分にLESSの恩恵にあずかれます。

順番に見ていきましょう。

なお、コードの見かたは以下のとおりです。

ネスト　～CSSのセレクタを入れ子にする

ネストとは、以下のようにCSSのセレクタをどんどん入れ子にして書いていくことです。

// LESS
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}


/* Compiled CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

「こう書ければ楽なのになー」と、一度は考えたことはないでしょうか？

ネストを使うと、記述量が減るだけではなく、HTMLの文書構造に近づくため、メンテナンス性も高まるのが大きな利点です。

ネストの落とし穴

ネストは非常に便利なのですが、あまりに利用する必要がないセレクタを記述してしまうと、非常に冗長なCSSが生成されてしまいます。

たとえば、以下のようにHTMLの文書構造に合わせて書くと、見やすく思えるかもしれません

// LESS
#entrypage {
     #header {
          nav {
               ul {
                    li {
                         a#home {
                              background: #ff0000;
                         }
                    }
               }
          }
     }
}

しかし、生成結果は以下のようになります。

#entrypage #header nav ul li a#home {
     background: #ff0000;
}

全体の構成にもよりますが、せっかく#homeというIDが付いているのですから、以下で十分な内容です。

#home {
     background: #ff0000;
}

idを単体で指定したほうが、子孫セレクタを指定するよりも描画速度が速くなります。

ネストは非常に便利な機能ですが、うまく活用しつつも、生成結果を常に意識して利用するようにしましょう。

変数　～繰り返す処理を一元管理

デザイナーの方は、ベースカラー／アクセントカラー／メインカラーなどをあらかじめ決めておいてデザインすることが多いのではないでしょうか。そしてコーディングの際、結果的にCSSの各所で色宣言をしていることでしょう。

そのような繰り返し宣言をせず、一元管理できるのが変数です。

たとえば以下のように@colorで宣言をした#4D926Fは、それ以降すべて@colorで呼び出すことができます。@以降の文字列は任意のもので構いません。

// LESS
@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

/* Compiled CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

@colorのように一色に限らず、以下も宣言しておくと便利です。

• @baseColor
• @accentColor
• @mainColor

筆者の場合は、統一したい余白の幅やフォントサイズを指定したりもしています。

これらはクラス名として宣言しておけば機能的には同様のことができるかもしれません。しかし、それはHTMLとCSSの原則である「構造とデザインの分離」を無視した宣言となってしまします。

また、「⁠やはり特定のタグのみ色を変えたい」という時に、CSSとHTMLの両方を修正する必要があるため、保守性も悪くなります。

変数を使えば、構造とデザインの分離を実現しつつも、デザインの使い回しができ、非常に都合が良いのです。

また、アクセントカラーとメインカラーをあえて同じ色にする場合もあるかもしれませんが、同様のページを作る場合でもコードを流用することを考えて、以下のように記述を分けておくと便利でしょう。

//LESS
@mainColor: #4D926F;
@accentColor: @mainColor;

このように仮に同じ内容でも書き分けをしておくことで、デザインの変更があった場合でも工数を削減できるでしょう。CSS上での文字列一括置換ではできない、LESSならではの利点ですね。

ミックスイン　～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、ハマりどころなどを、実例を交えて紹介していきます。ぜひお楽しみに！