web creators特別号

いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア

フレームワーク＆API 5-06
Web開発の生産性を向上させるメタ言語
Sass（SCSS）とLESSとは

CSSにおけるWeb 開発の生産性を向上させると言われるメタ言語「Sass」と「LESS」。ここでは、それらがどういったものか、また具体的にどのように使うのかについて解説する。

制作・文／酒井能克（有限会社ブルームーン）

CSSフレームワークの生産性を向上するメタ言語（LESS、Sass）

CSSはデザインのベクター要素を再現するため、時を経るごとに複雑化していった。そして、どんなテクニックでもある所までたどり着くとメソッドや形式化が進み次第にモジュール化され、標準化・互換化の道をたどる。その結果、生まれてきたのがCSSフレームワークだ。

CSSフレームワークを活用すれば、今まで職人芸的にあつかってきた表現がclass 属性にフレームワークの定義名を入れるだけで、誰でも同じ結果（しかもあらかじめ期待される結果）を出してくれる。つまりCSSフレームワークは、Web開発の生産性と互換性を向上してくれるものと言える。

そして、class 属性の定義の中身をパーツ化し、さらに便利するのがSass(SCSS)【01】とLESS【02】である。この２つは、抽象的に記述が可能なメタ言語という言語体系で記述されており、プリプロセッサによりコンパイルされてCSSとなる。

では、Sass (SCSS)とLESS、それぞれについて簡単に解説しよう。


【01】Sass の公式サイトのチュートリアル（http://sass-lang.com/tutorial.html）


【02】LESS の公式サイト（http://lesscss.org/）

Sassとは

まず、Sassのサイトのチュートリアルを簡単にまとめてみる。

Nesting（ネスト表記）

たとえば、navbarというクラスやIDの中に ul,liといったタグの書式をネスト形式で記述できる。

Parent Reference（親定義の参照）

親となるタグの定義を継承して記述できる。

Variables（値の代入）

main-colorやmy-styleなどの任意の変数名に値を設定できる。

Operations and Functions （演算と関数）

四則演算やパーセントでピクセルや透過率、色の減衰などを指定できる。

Interpolation（代入）

Top,left,bottom,radiusといった多用するプロパティの値を代入式で記述できる。

Mixins　多重継承クラス （混ぜて組み合わせたもの）

パーツ化された定義を複数組み合わせて組み立てることができる。

具体的な活用方法

今まで、何カ所も記述しなければならなかったCSSの定義が、Sass(SCSS)を利用すれば一カ所で集中的にコントロールが可能になる。その結果、開発効率が向上するだけでなく、修正や変更が発生した際の手間も大幅に省くことができる。

たとえば #00CCFF という定義で青系統のカラーを指定する場合、CSSファイルには何カ所も #00CCFF という記述があるはずだ。

もしこれを #0099FFに変えたいと思った場合、通常であればすべての定義を変換しなければならない。

一方、メタ言語を使用した場合は次のようになる。まずLESSなりSassのファイルに@blue #00CCFF という定義を記述する。もし、この色を#00CCFFから#0099FFに変えたい場合は、この定義の部分だけを書き換えればいい。あとはプリプロセッサが自動的にCSSをコンパイルし、必要な場所すべてを #0099FF に変更してくれる。

やりたいことを部品化し、さらに効率的にすることも可能だ。たとえば影つきでシェードのカラーを指定したボックスのデザインをグリッドレイアウトに合わせてすべて用意するといった時に @gridbox1 から @gridbox12 までを定義して @gridbox という mixin で描画するとわずか数行ですべてを定義できる。

このように、SassやLESSなどのメタ言語を使用すれば、修正や変更などの工程をかなり減らすことが可能となる。なお、この手順は、「5-1 Twitter Bootstrapを使ったサイト構築の流れ（前編） （後編）」でも解説しているので参考にしてほしい。

SCSSとは

前述したように、Sassを用いると生産性が向上し非常に便利である。だが、CSSとは文法が異なるため、気軽に使えるものではない。そこで登場したのがSCSSである。

SCSSはSassy CSSの略語で、翻訳すると「Sassのように記述できるCSS」となる。SassはHAMLというRails由来のやや難解な記述となっている。これをCSSに近い形に定義しなおしたものがSCSSだ。そのため、SCSSとCSSの記述はとてもよく似ている。

では実際に、単純な2カラムのレイアウトについて、SassとSCSSの記述を比較してみよう。

今回はSass ベースのフレームワークcompass【03】で公開されているサンプルを例にしている【04】。

このサンプルにおけるSass の記述は【05】、SCSSの記述は【06】となる。また、コンパイル後に出力されるCSSはいずれの場 合も【07】となる。


【03】compass（http://compass-style.org）


【04】上部のグレーの部分がサンプルとなる2 カラムのレイアウト（http://compass-style.org/examples/blueprint/grid/two_cols/）。


【05】Sass の記述。


【06】SCSSの記述。


【07】

LESSとは

LESSもSassの要点として上げた要素を一通り表現できる。以前は、コンパイルにRailsやnode.jsの環境が必須だったが、現在はコンパイル用のアプリケーションを起動しておけばコード保存時にコンパイルされるようになり使い勝手がよくなった。

LESSはTwitter Bootstrapの記述言語として注目されている。なお、GitHubで検索するとSass版のBootstrapも存在するのでどちらを使っても同じ結果を得ることができる。

では、最後にコンパイル用に便利なアプリを３つ紹介しよう【08】【09】【10】。

今までフロントエンドとバックエンドに分かれていたウェブ開発の現場がCSSフレームワークの採用によって緊密になりつつある。これらを上手に使いこなすことができれば、作業効率も上がり非常に便利だ。新しい言語やツールを覚えるのは手間ではあるが、最近ではだいぶ使いやすくなってきているので、是非とも使いこなしていってほしい。


【08】Mac 用のLESSコンパイル・アプリ（http://incident57.com/less/）


【09】Windows 用のアプリ（http://winless.org/）


【10】Sass(SCSS)コンパイル用のアプリ（http://mhs.github.com/scout-app/）


[目次に戻る]

 

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。


※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。