CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較

目次

1. はじめに
2. 動作環境・仕様の比較
3. 機能の比較
4. 記法の比較
5. 開発環境の比較
6. まとめ

はじめに

Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。

一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。

そこで、CSSの利点を活かしつつ、再利用性を高めるために作られたのが「SCSS(Sass)」や「LESS」等のCSSを拡張するメタ言語です。

「SCSS(Sass)」や「LESS」を利用することによって、CSSの文法はほぼそのままにCSSを拡張することができます。例として、ブラウザーごとに対応状況の異なるCSS3の「border-radius」プロパティを利用したルールセットを「CSS」、「SCSS(Sass)」、「LESS」で書くと、それぞれ次のようになります。

CSS(あまり好ましくない例)

.border-radius-2 {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
}

.border-radius-4 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

CSS(好ましい例)

.section {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  -ms-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;
}

.topic {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

Sass

@mixin border-radius($radius: 4px)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  -o-border-radius: $radius
  -ms-border-radius: $radius
  -khtml-border-radius: $radius
  border-radius: $radius

.section
  @include border-radius

.topic
  @include border-radius(2px)

SCSS

@mixin border-radius($radius: 4px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  -khtml-border-radius: $radius;
  border-radius: $radius;
}

.section { @include border-radius; }
.topic { @include border-radius(2px); }

LESS

.border-radius(@radius: 4px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  -ms-border-radius: @radius;
  -khtml-border-radius: @radius;
  border-radius: @radius;
}

.section { .border-radius; }
.topic { .border-radius(2px); }

変数の利用やルールセットのネスト(入れ子構造)、Mixinなどが行え、表現の分離という本来の目的を果たしつつ、CSSの再利用性と生産性を向上させることができるのが「SCSS(Sass)」や「LESS」です。

「SCSS(Sass)」と「LESS」の概要

「SCSS(Sass)」は、HTMLによるマークアップを簡略化するためのHamlというマークアップ言語から派生したもので、コンパイラーはRubyで実装されています。SCSS(Sass)記法で書かれたファイルのCSSファイルへの変換、サーバーサイドでの利用を想定されています。非常に豊富な機能を持っており、条件分岐や繰り返しによる柔軟な制御が可能です。

一方、後発の「LESS」は、「SCSS(Sass)」に比べると非常にシンプルな記法で、コンパイラーはJavaScriptで実装されています。LESS記法で書かれたCSSファイルへの変換はもちろん、「node.js」を利用したサーバーサイドでの利用も可能です。特に、JavaScriptを利用したクライアントサイドでの動的なCSSの生成ができるのも大きな特徴です。

(「LESS」も以前はRubyによる実装でしたが、最新版はJavaScriptで再実装されたようです。また、「SCSS(Sass)」のJavaScriptによる実装も存在するようですが、ここでは両者ともに公式の最新版を対象に比較します。)

基本的な部分では、「SCSS(Sass)」も「LESS」もできることは同じですが、「SCSS(Sass)」が豊富で柔軟な記法を持っているのに対し、「LESS」はシンプルな記法と動的な処理が特徴です。

動作環境・仕様の比較

「SCSS(Sass)」のコンパイラーが(Rubyさえインストールすれば)Windowsで動作するのに対して、「LESS」のコンパイラーは「node.js」の導入が必要なため、Windowsでの導入の敷居が高いと言えます。

ただし、「LESS」ではクライアントサイドでの変換も可能なため、この場合には導入が容易です。JavaScriptファイルを読み込むのみで、LESS記法で書かれたファイルをCSSへと変換してくれます。

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

しかし、JavaScriptが動作しない環境ではこの方法は利用できないため、JavaScriptが必須となるような動的なWebサイト以外には向きません。また動的な変換になるため、パフォーマンス面も気になります。

「SCSS(Sass)」はクライアントサイドでの変換はできませんが、出力されるCSSの整形スタイルを指定したり、ファイルの更新を監視し、更新と同時にCSSファイルを出力する機能があります。

機能の比較

基本機能では、「SCSS(Sass)」が圧倒的に豊富で柔軟な機能を提供しています。一方、「LESS」はCSSの構文になるべく沿う形でシンプルな機能、名前空間やスコープの概念を持っています。

記法の比較

「はじめに」と前章で触れたように、「SCSS(Sass)」が@ルールに近い記法を採用しているのに対して、「LESS」は既存のCSSの構文になるべく沿った形の記法を採用しています。例として、Mixinの記法を比較します。

「SCSS(Sass)」では、基本的にタイプする文字数が多くなりがちで、既存のルールセットを組み込むには書き直しが必要です。一方、「LESS」では、最低限の書き直しで既存のルールセットを組み込むことが可能です。

例えば、「LESS」では「Blueprint」のルールセットを「Blueprint」のCSSを書き直すことなく組み込むことが可能です。

LESS

.topic { .span-24 }

「SCSS(Sass)」では次のように書き直しが必要です。

SCSS(Sass)

@mixin span-24 {
  float: left;
  margin-right: 10px;
  width: 950px;
  margin-right: 0;
}
.topic { @include span-24 }

既存のCSSを容易に組み込めるのは「LESS」のメリットですが、通常のクラスセレクタによるルールセットとMixin用のルールセットが衝突する可能性があることがデメリットです。これを回避するために名前空間を利用することができますが、名前空間もIDセレクタと同様の記法のため、通常のIDセレクタによるルールセットと衝突する可能性があります。

多少の手間はかかるものの、「SCSS(Sass)」の記法の方が混乱しにくいように思います。

開発環境の比較

「SCSS」「LESS」ともにCSSベースの構文を持つため、「.scss」「.less」という拡張子をCSSファイルとして認識させることで、不完全ながらも、既存の開発環境でシンタックスハイライトや入力補完機能等を利用できます。「Sass」はCSSとは異なる構文を持つため、CSSとして認識されません。IDEの中では、「WebStorm」が標準で「SCSS(Sass)」「LESS」に対応しているようです。

「LESS」は、(「node.js」 + )コンパイラー導入の敷居が高いですが、MacではGUIツールが利用できるため、ローカル環境への導入も容易です。「SCSS(Sass)」はGUIツールがないため、コマンドラインやシェルスクリプト(バッチファイル)での利用が主になります。

まとめ

「node.js」を利用する場合や、 シンプルな機能で十分な場合、既存のCSSにできる限り近い記法で書きたい(新しい記法を覚えたくない)場合には「LESS」が良いかもしれません。

個人的には、「LESS」の名前空間、スコープは便利なものの記法が混乱しやすいこと、「SCSS(Sass)」の導入の容易さ、機能の豊富さと柔軟性・拡張性から「SCSS」を導入することにしました。「SCSS(Sass)」ベースのCSSフレームワークとして「Compass」があり、こちらもMixin等のコードを書く際には大変参考になります。