CSSの不便さを解消する！Sass（SCSS）のMacへの導入方法と基本的な使い方

Sass（SCSS）とは

SassとはCSSを拡張するメタ言語のこと。HAMLという言語でスタイルを記述する。SassをコンパイルすることでCSSファイルが生成される。Sassで、変数の使用、セレクタのネスト・継承などが使用できるようになる。

SassはHAMLという言語で記述すると前述したが、Sass 3.0からはSassy CSS（SCSS）というCSSの記述に近い新しい文法がサポートされた。

Sassのインストール

Sassを利用するにはRuby、HAML、SASSのインストールが必要となる。MacにはRubyがインストールされてるため、Rubyのインストールについては割愛する。

// Ruby gemsのアップデート
$ sudo gem update --system
// SASSのインストール
$ sudo gem install sass

Sassの使用方法

Sassは.scssファイルをファイルを作成して記述する。

構文

基本的な構文は以下のとおり。他にもSassには便利な関数も用意されている。

#container {
    @include clearfix; // ミックスインを利用
    width: 960px;
    /* 子要素をネストで定義 */
    #main {
        float: left;
        width: 650px;
    }
    #sub {
        float: right;
        width: 300px;
    }
    #footer {
        /* プロパティのネスト */
        font: {
            family: Arial;
            size: 85%;
            style: italic;
        }
    }
}
/* ミックスインを定義 */
@mixin clearfix {
    #zoom: 1;
    /* 擬似要素をネストで指定 */
    &:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
}
/* 継承元となる基本ボタンスタイルを定義 */
.basicButton {
    border: #ccc solid 1px;
    background-color: #eee;
    padding: 5px 10px;
    text-align: center;
}
/* .basicbuttonを継承した.blueButtonを定義 */
.blueButton {
    @extends .basicButton;
    background-color: #00f;
    color: #fff;
}

.scssファイルのコンパイル

下記のコマンドでCSSファイルの生成（コンパイル）を行う。

$ sass hoge.scss hoge.css

また、次のコマンドでscssファイルを監視するようになり、scssファイルに変更があるたびに自動でコンパイルしてくれるようになる。

$ sass --watch hoge.scss:hoge.css
// ディレクトリ単位での監視（ディレクトリ内の.scssを.cssにコンパイル）
$ sass --watch /PATH/TO/css
// .scssと.cssを別ディレクトリで管理
$sass --watch /PATH/TO/sass:/PATH/TO/css

Compass

CompassはSassを拡張したCSSフレームワーク。mixinでCSS3のborder-radiusやbox-shadowが定義してあり、ベンダープレフィックスを補完したスタイルが簡単に利用できる。また、clearfixやリセットCSSなども含まれる。

ツールを利用して自動コンパイルする

下記は起動しておくだけで.scssファイルを自動コンパイルしてくれる便利なアプリ。ターミナルを利用しなくても良いのでコマンドが苦手でも簡単にSassを利用できる。

開発ツールにもSassを導入する

主要な開発ツールにもSassのシンタックスハイライトやコンパイルを行うためのプラグインが公開されている。