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

CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。

結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。

はじめに

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)とLESS: 動作環境と仕様
項目 SCSS(Sass) LESS
実装 Ruby JavaScript
動作OS Linux / Mac OS X / Windows等 (Rubyが動作する環境) サーバーサイド: Linux / Mac OS X等 (「node.js」が動作する環境)
クライアントサイド: Linux / Mac OS X / Windows等 (JavaScriptが動作する環境)
サーバーサイドでの変換
クライアントサイドでの変換 ×
ファイルの更新監視 ×
出力CSSの整形 (ネスト、展開、コンパクト、圧縮) ×
記法 SCSS記法 (CSSベースの記法) LESS記法 (CSSベースの記法)
Sass記法 (インデントによるHamlベースの記法)

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: 機能
項目 SCSS(Sass) LESS 備考
外部ファイルのインポート 外部ファイルの読み込み。
コメント出力の制御 出力するコメント・出力しないコメントの制御。
ルールセットのネスト ネストされたルールセットの展開。
プロパティのネスト × ネストされたプロパティの展開。
演算 (数値、色、変数、文字列、真偽値) (数値、色、変数のみ) 演算結果の展開。
変数 変数への値の代入・変数の利用。
変数のデフォルト値の定義 × 未定義の変数に対するデフォルト値の定義。
条件分岐、繰り返しの制御 × 条件、繰り返しによる出力の制御。
名前空間 × (IDセレクタを親としたルールセットのネストにより実現) 名前空間によるMixin名、変数名の指定。
スコープ (ルールセットの宣言ブロックごとにスコープが独立) (ルールセットの宣言ブロックごとにスコープが独立) 変数のブロックスコープの有無。
関数 (色、数値、文字列等に関する関数) (色に関する関数のみ) 関数の展開。
Mixin(パラメーターなし) パラメータなしのMixin (ルールセットの限定的な多重継承)。
Mixin(パラメーターあり) パラメータありのMixin (ルールセットの限定的な多重継承)。
ルールセットの継承 × セレクタとプロパティを考慮したルールセットの多重継承。

SCSS(Sass)の「スコープ」の項目を「○」へ変更しました。

基本機能では、「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(Sass)とLESS: 開発環境
項目 SCSS(Sass) LESS
GUIツール Compass.app (Win/Mac/Linux) Scout (Win/Mac) Less.app (Macのみ)
Dreamweaver (SCSSのみ。CSSとして認識。) (CSSとして認識。)
NetBeans △ (SCSSのみ。CSSとして認識。) △ (CSSとして認識。)
Eclipse / Aptana △ (SCSSのみ。CSSとして認識。) △ (CSSとして認識。)
WebStorm

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

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

「SCSS(Sass)」にも、「SCSS(Sass)」ベースのCSSフレームワーク「Compass」に対応したGUIツールがあるようです。Java製のため、Windows / Mac OS X / Linuxの主要OS全てに対応しています。

「SCSS(Sass)」、「Compass」に対応したオープンソースの「Scout」というGUIツールも公開されています。こちらはWindows / Mac OS Xに対応しています。

まとめ

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

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

コメント (6)

  • hlb
  • 2011-03-22 01:42

We have made GUI app called Compass.app, which runs Sass/Compass in MacOS/Win/Linux.

http://compass.handlino.com/

Hi, thank you for introducing GUI app to me and my readers!
I have made some modifications to my article for your app.

大変勉強になりました(感謝)。

勉強になりました。
compassですが、Sassでの利用なようです。(SCSSでなく)

>compassですが、Sassでの利用なようです。(SCSSでなく)

最新版のCompassでは、標準でSCSSを使用するようになったみたいです。

以前のバージョンでも、

compass create -x scss
compass create
–syntax scss

でSCSS文法を使用したプロジェクトが作成できるはずですので、SCSSを利用したい場合にはお試しください :)

「.less css」のキーワード検索から訪問しました。開発環境含めて比較されるなど、読みやすくかつわかりやすくて勉強になりました!
自分はプログラマではないので実際に開発するケースはなさそうですが、CSSに条件分岐を入れられたりすることで、JSに依存せずとも動きに富むデザインが出てくるのだろうと思いました。

コメントフォーム

トラックバック (14)

[...] Bootstrapを使うことのアドバンテージは、それがLessを使っていることだ。TwitterによればLessは、CSSに対するプリプロセッサで、いきなりCSSを書くよりははるかに、強力で柔軟性に富んだ表現ができる。たとえばLessでは、宣言のネスティング、変数、ミックスイン(Mixin)、演算、カラー関数などを使える。Lessを使ったことにより、Bootstrapの実装も容易になり、きわめてシンプルである(Twitterによれば、コード中に単純に挿入するだけでよい)。〔Lessに関する参考ページ。〕 [...]

[...] (※1)sass 的なやつです。less ファイルをコンパイルして css ファイルを作ることもできます。 これは npm でインストールする必要があるので node 環境が必要になってきます。 less と sass が分からない場合は”CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較“がわかりやすかったです。 [...]

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

[...] CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 – (DxD)∞ [...]

[...] 介したLESS.appも基本的な流れは同じだと思うので、好きな方を試してみてください。SCSSとLESSの比較記事も見つけました。はじめHAMLとかCoffeeScriptとかを見た時は正気の沙汰とは思えなかっ [...]

[...] CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 – (DxD)∞ [...]

[...] Compass 参考:CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 – (DxD)∞ [...]

[...] ぞ!ん? SassとLessって?違いがよくわからない…。 って事で、調べてみました。 詳しく書かれている方もいらっしゃるので、割愛しますが すごーく、ざっくりとご説明しますと…. コ [...]

[...] CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 | Day by Day Infinity [...]

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

[...] Sass 参考:CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 – (DxD)∞ [...]

この記事のトラックバックURI
http://dxd8.com/archives/217/trackback/
この記事のURI
http://dxd8.com/archives/217/