2013/04/24更新

[CSS] Lessに詳しく入門してみた

こんにちは、@yoheiMuneです。
皆様、CSSのプリプロセッサは使ってますでしょうか？非力な構造のCSSを、プログラムチックに記述できるようにして、効率的にCSSを開発するためのツールです。
Scssを仕事でもよく使うのですが、とある事情でLessというCSSプリプロセッサを使うことになりました。 Lessに入門するという意味も込め、学んだ内容をブログに書きたいと思います。

記事が長くなってしまったので、目次を記載します。以下の内容を記載しました！

- １、CSSプリプロセッサとは
- ２、Lessの特徴
- ３、Lessを使える環境を整える
- ４、Lessの基本的な使い方を学ぶ（CSS記述、入れ子、変数、演算）
- ５、Mixinを使ってみる（基本編）
- ６、Mixinを使ってみる（応用編）
- ７、Less内でJavaScriptを利用する
- ８、Lessの組み込み関数を利用する
- 最後に

１、CSSプリプロセッサとは

CSSを効率的に開発するためのCSSプリプロセッサ。種類は色々とありますが、代表的なCSSプリプロセッサにはScss、Less、Stylusというものがあります。それぞれの違いは以下の感じでしょうか（個人的な意見が含まれます）。

Scss	CSSプリプロセッサの初心者向け。CSSの記述を100%サポートしつつ、入れ子構造やMixinなど便利な書き方も出来る。Compassという便利なフレームワークが出回っている。
Less	Scssと同じくCSSの記述を100%サポートしつつ、入れ子構造やMixinなどの書き方も可能。lessファイルをそのままブラウザで読み込んで動的にコンパイルする仕組みがあったり、素のJSをCSS内に書けたりと、Scssよりプログラマ向けかも。
Stylus	Rubyの記述に似ていて、セミコロンや中括弧などの面倒な文字を打たなくていいので、書きやすい。しかしRubyに慣れていないフロントエンドやデザイナーが見ると理解できないかも。

それぞれ特徴がありますが、今回はLessを詳し目に入門することを書いていきたいと思います。

２、Lessの特徴

各種あるCSSプリプロセッサの中で、Lessの特徴は以下となるかと思います。

[メリット] lessファイルをHTMLで読み込んで、CSSとして反映することが出来る。開発中は便利。
[メリット] Lessに最初からwatch機能が付いていて、指定した時間ごとにlessを読み込み直してくれる。これも開発に便利。
[メリット] Less内にJSを記述することができる。例えばWindowの高さを取るとかできちゃう。
[デメリット] ScssのCompass的な便利なフレームワークが少なそう。
[デメリット] ScssよりMixinや条件分岐などが直感的でないかも。

個人的な見解としては、開発中は便利だしプログラマてぃっくな所は好きなのですが、ローレベルな機能が多くて慣れるまでの実装が大変そうという感じです。
以下ではLessの具体的な使い方を、本家のページを参考にしつつ、記載していきたいと思います。

３、Lessを使える環境を整える

Lessを使う環境を整えるのはとても簡単で、lessファイルをHTML上で解釈するためのJSを入手して、HTMLファイル上でそれを読み込むだけです。
lessを解釈するJSは、以下のサイトからダウンロードすることが出来ます。

http://lesscss.org/#usage/
「Download less.js」というボタンの部分です。

ダウンロードしてきたら、HTMLファイルと空っぽのlessファイルを用意して、HTMLを記述します。

<html>
<head>
  <meta charset="utf-8"/>
  <title>Lessサンプル</title>
  <!-- lessファイルを読み込みます -->
  <link rel="stylesheet/less" type="text/css" href="less/styles.less" />
  <!-- lessファイルを解釈するJSを読み込みます -->
  <script type="text/javascript" src="js/less-1.3.3.min.js"></script>
</head>
<body>
</body>
</html>

これでlessファイルを使う準備は完了です。
試しにWebブラウザで見てみます。

ここで注意なのですが、lessファイルをJSからAjaxで取得する仕組みのようなので、index.htmlをダブルクリックしてブラウザに読み込ませた場合には、lessファイルがCross Origin制約で取得できない場合が多いです＞＜。
対応策としては、Chromeの起動オプションを変えるとか、LocalFileのクロスオリジンに寛容なSafariを使うか、index.htmlのあるディレクトリで、「python -m SimpleHTTPServer」などのコマンドで簡易的なサーバーを立てて、そのサーバーへアクセスする必要があります。

Cross Origin制約を克服できれば、いい感じにページが表示されるかと思います。

試しに、styles.lessに以下の記述を追加して、ブラウザをリロードしてみてください。

background-color: red;

無事に背景が赤くなれば、正常に動作していると判断できます。

４、Lessの基本的な使い方を学ぶ（CSS記述、入れ子、変数、演算）

ここからはLessの使い方を記述していきたいと思います。

CSSの書き方は100%サポートされている

Lessの書き方ですが、LessはCSSの記述がサポートされていますので、CSSをそのまま記載することが可能です。

.frame {
  width: 100%;
  height: 400px;
  background-color: #ffffcc;
}
.frame .message {
  padding: 10px;
  text-align: center;
  color: #333;
}

入れ子構造が書けるので大変読みやすい

そしてCSSプリプロセッサで便利な点である、入れ子構造でも記載することが出来ます。
上記と同じ内容を以下のように記載することが出来ます。

.frame {
  width: 100%;
  height: 400px;
  background-color: #ffffcc;

  .message {
    padding: 10px;
    text-align: center;
    color: #333;
  }
}

入れ子構造って分かりやすいですね！「.frame」クラスの要素の子孫要素で「.message」クラスが付与された要素という感じを直感的に理解することが出来ます。

変数を使ってみる

他のCSSプリプロセッサと同様に、変数を利用することが出来ます。
例えばサイトで共通で使われるフォント色などを変数で定義しておくと、その色を変える際に変数部分のみを変えるだけでサイト全体に反映されるなど、定義を１カ所に出来ることは便利です。
使い方は以下の用になります。

// 以下のような記述で変数を定義することができます。
@fontBasicColor: #333;
@fontEmphasisColor: #f00;

.frame {
  // こんな感じで変数を利用することが出来ます。
  color: @fontBasicColor;
  .errorMessage {
    color: @fontEmphasisColor;
  }  
}

仕事でCSSプリプロセッサを使う場合には、文字色と文字サイズなどサイトで共通デザインとなる部分は変数で定義して、定義の一元管理を行っています。

演算

演算を行うことも出来ます。
CSSのプロパティ値で「なぜこの値？」と思うことは多々ありませんか？きっとそれは横幅とかマージンとかを足したり引いたりした結果の値であることが多いのでは無いでしょうか？ Lessではその計算式をそのまま記述することが出来ます。計算を自分でしなくていいので計算間違いも無いですし、後で読んでも値の意味をより理解できるようになります。
以下のような使い方が出来ます。

.frame1 {
  width: 320px - 10px;
  margin: 0 5px;
}

// または以下のような変数を絡めた演算も可能です。
@marginSize: 5px;
.frame2 {
  width: 320px - @marginSize * 2;
  margin: 0 @marginSize;
}

CSSで演算が出来るだけでも便利ですねー。

５、Mixinを使ってみる（基本編）

続いて、Mixinを使ってみます。Mixinとはプログラム言語の関数のようなもので、共通の処理（演算とか出力とか）を纏めることで、綺麗なプログラムを書けるようになります。
例えば以下のような実装を行うことが出来ます。

// border-radiusを各種ブラウザ用に表示するMixin
.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

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

上記の例では、border-radiusをマルチブラウザ用に出力するための関数を定義し、4pxの丸みにしたり、5pxの丸みにしたりと使う側で丸み具合を指定しています。

またMixinの引数に初期値を設定することも出来ます。

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header {
  .border-radius;
}

またMixinの定義は引数の括弧あり、括弧なしのどちらでも定義することが可能ですが、括弧なしで定義した場合には出力結果のCSSには入らず、CSSの肥大化を防げます。

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

引数には複数指定することも可能です。複数の引数を定義する場合には、セミコロンで区切ります。

.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

ここはlessのややこしいところと思うのですが、引数をカンマで区切ると意味が変わる場合があります。配列と認識されるようです。
詳細は、lesscss.org - Mixins with Multiple Parametersを参照ください。

Mixinでは、可変引数を定義したり、Mixin内でargumentsを使えたりと、lessはMixinがかなり強力に定義できるようです。

６、Mixinを使ってみる（応用編）

さらにMixinに入門してみます。

Mixinをオーバーロードする

オーバーロードという表現が適切かは分かりませんが、引数の値に合わせて同じ名前のMixinを呼び分けることが出来ます。
例えば以下のようにMixinを定義すると、

.mixin (dark; @color) {
  color: darken(@color, 10%);
}
.mixin (light; @color) {
  color: lighten(@color, 10%);
}
.mixin (@_; @color) {
  display: block;
}

display:blockは表示されつつ、第１引数の値がdarkかlightかにより、表示されるcolorが変わってきます。
例えば以下のように利用すると、

@switch: light;

.class {
  .mixin(@switch; #888);
}

第１引数にはlightを渡しているので、指定した#888の色から10%明るい色が表示されます。
こんな感じで、引数の値に合わせて呼び出すMixinの内容を変化させることが出来ます。

また同じ名前のMixinでも引数の数を変えることで、別のMixinとして定義することが出来ます（こっちのがオーバーロードっぽいかも）。
例えば以下の２つのMixinを定義することが出来ます。

.mixin (@a) {
  color: @a;
}
.mixin (@a; @b) {
  color: fade(@a; @b);
}

この場合、引数１つで呼び出すと上側のMixinが利用され、引数２つで呼び出すと下側のMixinが利用されます。
こんな感じで同じ名称のMixinですが、別々の機能を持つように実装することが出来ます。

Mixinを条件分岐を使って呼び分ける

LessではMediaQueryのように条件に合致する場合のみ呼び出されるMixinを定義することが出来ます。
例えば以下のような感じです。

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

この場合、colorコードを渡された際に、その色の明るさに合わせて背景色を黒か白に切り替えるように実装されています。
以下のように呼び出して使うことが出来ます。

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

そしてCSSへのコンパイル結果は以下のようになります。

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

条件を複数指定することも可能です。以下のように実装します。

// OR条件
.mixin (@a) when (@a > 10), (@a < -10) { ... }
// AND条件
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

とMediaQueryに似た感じの記述ですが、慣れてないので難しく感じるー、というのが個人的な印象です。

７、Less内でJavaScriptを利用する

Lessの大きな特徴の１つとして、lessファイル内でJavaScriptが利用できる点が挙げられます。
ブラウザの用意する変数にもアクセスできたりするのですが、CSSでJavaScriptが入るのは、個人的には微妙な気がしてます。
こんな感じで記述できます。

// JSの関数呼び出し
@var: `"hello".toUpperCase() + '!'`;
// PHPやRubyのようにプレースホルダーでも利用可能
@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;
// 実行環境の値も取得できる
@height: `document.body.clientHeight`;

という感じです。個人的にはあまり利用しなさそうな機能かも。

８、Lessの組み込み関数を利用する

上記の説明でも少し出てきましたが、Lessには多くの組み込み関数が用意されています。例えば以下のような機能が実装されています。

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(0.5); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

色々と関数が用意されていますので、気になる方は、Less Function Referenceをご参照ください。
これもあまり使わない気が、個人的にはしています。。

最後に

Lessを利用し始めるからということで色々と調べてみた結果を書かせて頂きました。
CSS内でJSが使えるとか、組み込み関数が色々とあるとか、Mixinの定義が柔軟とかの特徴があることが分かりました。

しかし、個人的には良く利用するScssやCompassの方が良いなぁと思いました。低レベルAPIが豊富ですが、高レベルAPIがまだ整備されていない点や、Mixinの条件分岐がメディアクエリ形式な点が、個人的には合わないかもという感じで。 Base64とかスプライト作成機能とかもあるのかな？

最後までご覧頂きましてありがとうございました。