SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント

CSS SCSS

SCSSとLESSのどちらを導入するかけっこう悩んだ時のまとめです。
最終的にはSCSSを選択しましたが、導入の参考になれば幸いです。


ちにみに、SCSSとLESSとは

再利用できるスタイル定義や変数など、CSSを効率的にコーディングできるように拡張されたメタ言語です。
どちらも、CSSをベースにした独自の記法でもってコーディングしそれをコンパイラでCSSに展開するというものです。

LESS
SCSS

動作環境や使用などの詳しい比較はこちらが参考になります
http://dxd8.com/archives/217/

Sass ≠ SCSS
SCSSを調べていると、Sassという単語も目にすると思います。

使い始めた当初はごっちゃになってたのですが
もともとはSassというプロジェクトが存在し、そこから派生したのが SCSSらしいです。

Sassも同じコンセプトのCSS拡張言語ですが、
たとえば {}ではなく、インデントでプロパティを記述したり、セミコロンが不要だったりとシンタックスがCSSとは異なります。

ここではSCSSを取り上げています。

よく使う機能

通常のCSSへ感じている不満を解消してくれる次の3つはとても重宝しています。

特にミックスインと変数はコードの再利用性を促すので似たようなコードが発生しやすいCSSを抑制してくれます。
コーディング規約だけに頼らずに管理面を強化できるので複数人での制作時に力を発揮するのではないでしょうか。

上記の機能であれば、SCSSとLESSどちらにもあります。

SCSSには、さらに条件分岐やループがあったりと、よりスクリプトっぽく書けますが、あまり高機能だとちょっと本末転倒な気もするので私は使ってません。

サンプルコード

.scss
//------------------------------------------------------------------------------
//  SCSS
//------------------------------------------------------------------------------
//ではじまるコメントは除去される

//変数
$line_color: #000;

//ミックスイン
//引数に初期値が使える
@mixin box($line: #444) {
	margin: 10px;
	padding: 8px;
	border: 1px solid $line;
}

/**
 * box style
 */
div {
	//ミックスインの呼び出し
	@include box();
}

/**
 * Article section
 */
#Article {
	//セレクタのネスト
	div {
		@include box($line_color);
	}
}

[追記] 2011/12/3
windows環境だと日本語がWindows-31Jとかエラーが〜云々って書いたのですが、これよくよく考えたらフォント指定で困りますね。普段Macで作業してたので気付かなかったんですけれども、partialに日本語を含んでいるとコンパイル時に必ずコケます。コンパイル対象としているファイルに記述をまとめて回避してますけど、もっといい対策方法はあるのでしょうか...

.less
//------------------------------------------------------------------------------
//  LESS
//------------------------------------------------------------------------------
//ではじまるコメントは除去される

//変数
@line_color: #000;

//ミックスイン
//引数に初期値が使える
.box(@line: #444) {
	margin: 10px;
	padding: 8px;
	border: 1px solid @line;
}

/**
 * box style
 */
div {
	//ミックスインの呼び出し
	.box();
}

/**
 * Article section
 */
#Article {
	//セレクタのネスト
	div {
		.box(@line_color);
	}
}
コンパイル後のCSS
/**
 * box style
 */
div {
  margin: 10px;
  padding: 8px;
  border: 1px solid #444444;
}
/**
 * Article section
 */
#Article div {
  margin: 10px;
  padding: 8px;
  border: 1px solid #000000;
}

コンパイル後のものは整形してますがだいたい同じもの出力されます。
※SCSSは #000 を black とかにしてしまうので好みの分かれるとこかも
※どちらもminifyが用意されてます

@mixinや@includeといったディレクティブのない、LESS記法のほうが通常のCSSに近いので学習コストも低く、また .クラス名セレクタをミックスイン定義としても利用できるので既存プロジェクトからの移行や、普段から使用しているライブラリの流用を想定しているのならLESSがよさそうです。

コンパイラ

どちらもコマンドラインから使えます。
SCSSはRubyで動作するので、gem install sass でインストールできます。

コンパイルは次のコマンドで行います。

$ scss styles.scss styles.css

--watch オプションをつけると .scss ファイルが更新されたら即CSSへコンパイルする、ファイル監視が実行されます。

$ scss --watch styles.scss styles.css

いっぽうLESSはコンパイラがjsで実装されています。
なので動的に処理するのであれば、.lessファイルとless.jsを読みこむだけです。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

環境を問わず開発が行えるのでこれは強みです。
とはいえ実際に運用するなら、CSSにコンパイルしたほうが無難だとは思います。

コマンドラインからコンパイルする場合はnodeが必要なのでwindowsだとちょっと面倒かもしれません。
MacにはGUIアプリの LESS.app があります。
プロジェクトフォルダをアプリにドロップすると自動的に.lessを検出してファイル監視を開始するで手軽でよいのではないでしょうか。

総合的には

作業環境がMac（で統一されているの）なら、導入コスト的にはLESSがおすすめです。

ただし個人的にLESSの導入がネックだった点は、ミックスインと同名のスタイル定義ができてしまうことです。

コンパイル前のLESS
.box() {
	border: 1px solid #000;
}

.box {
	border: 1px solid #f00;
}

div.section {
	.box;
}
コンパイル後のCSS
.box {
	border: 1px solid #f00;
}
div.section {
	border: 1px solid #000;
	border: 1px solid #f00;
}

.box() {} と、.box {} が共存しています。

これをメリットととるかデメリットととるかは運用次第だと思いますが、複数人で作業していると意図しないスタイルの上書きが起きる可能性もあり、そういった問題を回避することを導入目的としているので、この点が非常におしいです。

今回は、ディレクティブで宣言を明示できるSCSSに軍配があがりました。

まとめ

どちらを導入するにせよ、効率化は期待できるので、既存のコーディング規約などと照らしあわせて選択してみるとよいのではないでしょうか。

しばらく運用してみて、やっぱLESSだよ！となったらまたまとめたいと思います。