Webデザイン 1-08
Sassを活用して効率よくCSSを記述する（前編）

CSS開発の生産性を劇的に改善できると話題になっているSass。ここではSassを使用することによってどんなメリットがあるのか、また具体的にどのように使うのかについて解説する。

制作・文／林俊之（NTTレゾナント株式会社）

01

CSS3はさまざまなプロパティが追加され表現力が増したが、その一方でCSSの記述量は増えており、メンテナンスコストはこれまで以上に負荷が高くなっている。

また、CSS3のプロパティは各ブラウザで先行実装されているものの、それを使うにはベンダープレフィックスと呼ばれる-moz-や-webkit-などの文字を付与しなければならない場合もある。例えばグラデーションの表現で、各ブラウザで動作するようにするには【1-1】のように同じ記述を何度も書く必要がある。

このようなCSSのメンテナンスを大幅に楽にしてくれるのが本項で紹介するSassというメタ言語だ。まずSassの形式で記述し、それをCSSに変換して使う。SassのほうがCSSに比べ柔軟な記述ができるため、メンテナンス性が大幅に向上することになる。なお、Sassの公式サイトのURLは「http://sass-lang.com/」だ。

【1-1】ベンダープレフィックスの文字を付与するため、同じような記述を繰り返すことになる。

02

SassはRubyで開発されており、以前はコマンドラインで使うことが前提だった。そのためデザイナーには敷居の高いものだったかもしれないが、最近はGUIのツールも提供されており扱いやすくなってきている。そこで本項では「Scout」というGUIツールを使って解説をしていこう。

まずは公式サイトからScoutをインストールする【2-1】。ScoutはWindowsでもMacでも使うことができる。インストール後、アプリケーションを起動し、左下の「+」ボタンを押してInputFolderとOutput Folderに適当なディレクトリを指定する【2-2】。

今回は同じディレクトリの指定でOKだ。そのディレクトリ内にsass_sample.scssというテキストファイルを作り、【2-3】のテキストを入力して保存してみよう。再生ボタンを押すとsass_sample.cssというファイルが生成され、scssファイルを更新するたびにCSSファイルを自動的に更新されるようになる【2-4】。

【2-1】SCOUTの公式サイト（http://mhs.github.com/scout-app/）

【2-2】Output StyleでCompressedを選ぶとCSSの圧縮も可能だ。

【2-3】

【2-4】コンソールログでCSSファイルが出力されたか確認できる。

03

SassにはSassとSCSSという2種類のシンタックスがある。SCSSはver3より導入された新しいシンタックスで、CSSの拡張シンタックスになっている。CSSを書いた経験のある人には馴染みやすいのでおすすめだ。ここはSCSSを使って説明する。

CSSを記述していて、カラーやマージンの値を変数で持てれば便利なのに、と思ったことはないだろうか。Sassでは変数を使うことができ、また値にはCSSのプロパティで使われる文字列や数値を入れることができる。先ほどのsass_sample.scssに【3-1】の記述を追加してみよう。変数は$で宣言する。

これによって自動的に生成されるsass_sample.cssは【3-2】のようになる。border-color に$color1 で定義した#ff3300が代入されている。またmarginの箇所では四則演算もできることがわかるだろう。これだけでも使ってみたくなるが、Sassの便利さはこれだけではない。

【3-1】変数はで$宣言する。

【3-1】変数はで$で宣言する。

【3-2】変数の箇所が置換されているのがわかる。

04

CSS を記述する際、【4-1】のように同じセレクタを何度も書く場合があるだろう。Sassではネストした記述が出来るため、【4-2】のようにより効率的に書くことができる。HTMLの構造に近い形で記述できるので見た目にもわかりやすくなる。また、【4-3】のようにプロパティをネストすることも可能だ。これらはらはの【4-4】ようなCSSとして出力される。

【4-1】同じセレクタを何度も書くのは面倒。

【4-2】HTMLの構造に近いのでわかりやすい。

【4-3】プロパティもネスト可能だ。

【4-4】【4-2】と【4-3】はこのように出力される。

（後編に続く）

[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。