2/3 CSSを効率的に記述できるメタ言語「LESS」の使い方 [ホームページ作成] All About

CSSを効率良く楽に記述できるメタ言語「LESS」の書き方

それでは、LESSの書き方と、その書き方がどういうCSSだと解釈されるのかを見ていきましょう。とても便利にスタイルが書けることがお分かり頂けるはずです。

１．変数を使って、値の指定を楽にできるLESSの書き方

@base-color: #4D926F;   /* ←変数を定義 */

h1 {
  color: @base-color;
  padding: 0.3em;
}
h2 {
  color: @base-color;
  font-weight: normal;
}

ここでは「base-color」という変数を用意して、「#4D926F」という値（色）を格納しています。その色を、h1要素やh2要素に適用しています。変数名は、先頭を「@」記号にして自由に付けられます。

上記のLESSソースは、以下のCSSソースを記述した場合と同じに解釈されます。

h1 {
  color: #4D926F;
  padding: 0.3em;
}
h2 {
  color: #4D926F;
  font-weight: normal;
}

複数の要素に同じ装飾を適用したいとき、このように変数を使うと、装飾内容を変更したい場合でも、書き換えるのは変数部分のたった1箇所で済むメリットがあります。

２．複数のスタイルを関数のようにまとめて、装飾を効率良く指定できるLESSの書き方

.kadomaru (@radius: 5px) {
  -webkit-border-radius: @radius; /* Chrome,Safari */
  -moz-border-radius: @radius;    /* Firefox */
  border-radius: @radius;         /* CSS3 */
  border: solid green 2px;
}

h1 {
  .kadomaru;
}
h2 {
  .kadomaru(10px);
}

ボックスの角を丸くする場合、-webkit-や-moz-などのベンダープレフィックスを付けて、同じ値を何度も記述しなければなりません（詳しくは、記事「画像を使わずにCSSだけで角を丸くする方法」をご参照下さい）。ここでは「kadomaru」という名称の関数（のようなもの）を用意し、その中にボックスの角を丸くする記述を含めています。その関数をh1要素やh2要素から呼び出して装飾しています。こうすると、同じ記述を何度も書かずに済み、手間も省けますしソースも読みやすくなります。

上記のLESSソースは、以下のCSSソースを記述した場合と同じに解釈されます。

h1 {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: solid green 2px;
}
h2 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: solid green 2px;
}

引数を特に指定しない場合は、上記のh1要素のように、デフォルトの「5px」を指定したことになります（デフォルトの値は、関数を定義したときに記述しておけます）。引数に「10px」を指定したh2要素では、その「10px」がスタイルの値として使われます。このように、関数と変数を利用して効率良くCSSが記述できます。

３．計算式を使って値をずらすことで、装飾を効率良く管理できるLESSの書き方

@base-color: #888888; /* 変数にベースの色を格納 */
@base-border: 2px;    /* 変数にベースの太さを格納 */
@base-padding: 0.5em; /* 変数にベースの広さを格納 */

h1 {
  color: @base-color + #222222;  /* 明るく */
  border: @base-border * 2;      /* 2倍に(太く) */
  padding: @base-padding + 0.3;  /* 広く */
}
h2 { 
  color: @base-color - #333333;  /* 暗く */
  border: @base-border / 2;      /* 半分に(細く) */
  padding: @base-padding - 0.2;  /* 狭く */
}

変数に入れた「太さ」や「色」の数値は、四則演算が可能です。色を足し算すれば明るくでき、色を引き算すれば暗くできます。ベースの「太さ」をかけ算で太くしたり、割り算で細くしたりもできます。ここでは解説を割愛しますが、色相・明度・彩度・透明度などを個別に割合で調節したり、小数を整数に丸める数学関数なども用意されています。

上記のLESSソースは、以下のCSSソースを記述した場合と同じに解釈されます。

h1 {
  color: #aaaaaa;  /* ＝#888888 ＋ #222222 */
  border: 4px;     /* ＝2px × 2 */
  padding: 0.8em;  /* ＝0.5em ＋ 0.3 */
}
h2 { 
  color: #555555;  /* ＝#888888 － #222222 */
  border: 1px;     /* ＝2px ÷ 2 */
  padding: 0.3em;  /* ＝0.5em － 0.2 */
}

「h1要素の装飾」と「h2要素の装飾」はまったく異なるものですが、ベースにしている値（太字部分）は同じです。この「ベースの変数の値」を書き換えるだけで、（変化量を維持したまま）両者の装飾をまとめて修正できるので、とても便利です。

４．CSSの階層構造を把握しやすく書ける、入れ子を使ったLESSの書き方

div#header {
  background-color: #ccffcc;
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        color: red;
      }
    }
  }
}

上記のように、入れ子構造を使ってスタイルを定義できます。HTMLも各要素を入れ子構造を使って記述しますから、CSSも同様の方法で記述できると分かりやすいでしょう。上記は、div要素の内側にh1要素とp要素があり、p要素の内側にa要素があり、a要素の内側にhover疑似クラスがあり……という階層構造になっています。

上記のLESSソースは、以下のCSSソースを記述した場合と同じに解釈されます。

div#header {
  background-color: #ccffcc;
}
div#header h1 {
  font-size: 26px;
  font-weight: bold;
}
div#header p {
  font-size: 12px;
}
div#header p a {
  text-decoration: none;
}
div#header p a:hover {
  color: red;
}

CSSソースだと、上記のように上位階層のセレクタ（要素名など）を何度も繰り返して記述しなければなりません。LESSだと、入れ子構造が使えることで分かりやすく記述できます。

さて、上記のように「LESS」を使えばCSSを効率良く楽に記述できますが、このままではブラウザは認識できません。最後に、この「LESS」をブラウザにCSSだと認識させる方法をご紹介致します。