LESS と Sass で CSS をより簡潔にする

作者 Werner Schuster , 翻訳者 吉田 英人 投稿日 2009年8月2日

セクション

デベロップメント,

設計/アーキテクチャ

トピック

Domain Specific Languages ,

Ruby on Rails ,

ランタイム ,

シンタックス ,

Ruby ,

言語設計

タグ

CSS ,

Parsing ,

DSLs

原文(投稿日：2009/7/24)へのリンク

Web 開発には CSS が付き物ではあるが，時として同じ内容の繰り返しになることがある。LESS と Sass は，そのような CSS ファイルをよりよい構成で記述可能にする言語であり，Ruby 上で動作する。この２つは強化されたCSS風の入力言語をCSSに変換するという，非常によく似たアプローチを採用している。

２つの言語は CSS に付加する機能の面でもほとんど同じである。ここではその概略を紹介する。詳細は LESS と Sass それぞれの資料を参照されたい。

• 変数: LESSでは @name，Sass では !name と記述する。変数への値の代入と，ファイル内の任意の場所での参照が可能である。
• ネスティング: CSS に望まれている機能のひとつであり，トップレベルのセレクタ定義内に内容を展開する必要なく，セレクタを入れ子にするものだ。LESS と Sass のトランスレータが，この簡潔な定義を CSS に展開する。
• ミックスイン: プロパティの共通部分をグループとして抜き出して名称を付け，セレクタにインクルードすることができる。Ruby のミックスインの利点を知っているRuby開発者であれば，CSSにおけるミックスインの使い勝手についても理解できるだろう。
• 演算: LESS，Sassともに値の加算などの簡単な算術計算を可能としており，変数と合わせて使用することでCSSファイルの自由度を高めている。またどちらの言語も，フォントサイズなどの単位指定が演算後も保持されるように配慮されている。

Sass は Haml と同じチームによって開発されている。Sass はブロックやネストレベルを表す方法に Haml のアイデアを使用しており，カッコなど明示的なデリミタの代わりにインデンテーションが用いられる。
Sassの手書きパーザとトランスレータが変数参照の解決やミックスインの展開などの処理を行い，Sass を CSS に変換する。

LESS は Sass に触発され，次のような理由から開発された。

Sass の代替をなぜ作ろうと思ったか？理由は単純で，その文法にあります。Sass のキーとなる機能のひとつにインデントベースのシンタックスがあります。これによって波カッコやセミコロンのないコードを書くことができるのですが，新たなシンタックスの習得と既存のCSSスタイルシートの書き直し，というコストを伴っています。

LESS は CSS を包含していますが，追加された機能はいずれも可能な限りシームレスな方法で組み込まれています。これによって，既存 CSS 定義の段階的な移行を可能にしています。また変数や演算式だけを利用したい，というような場合であれば，新しい言語のすべてを覚える必要はありません。

LESSのパーザは，Rubyで記述された PEG パーザジェネレータである TreeTop を使用して記述されている (LESS文法 の TreeTop記述はこちらで参照可能)。

LESS と Sass 関連のツール(コンパイラ，API)は Gem としてインストール可能である。提供されるのはコンパイル用のコマンドラインツールであるが，Ruby コードからも利用できる。

Sass のメンテナンスを担当している Nathan Weizenbaum 氏は，LESS と Sass を比較した最近のブログエントリで，将来の Sass リリースではネスティングの方法として，インデンテーションの代わりに CSS や LESS のようなカッコを使用できるオプションを用意する予定である，と書いている。

• 次へ >