MacにCompassをインストールしてCSSを楽に書く

CSSを書くのには SASS / Compass が便利です。
SASSは「Syntactically Awesome Style Sheets」の略称で、CSSのメタ言語です。つまり、SASS言語で記述したファイルをコンパイルすると、CSSファイルを生成されるのです。

最初からCSSを書けばいいのでは?と思われるかもしれませんが、SASSではスタイルが継承出来たり、色やサイズを変数で定義することができたり、計算式が使えたりなど、いろんなメリットがあります。
また、CompassはSASSを利用したCSSフレームワーク集で、予め再利用可能な関数、部品のようなものを定義してあるので、CSS開発が非常に高速になります。

それでは、先にSASSの例をみてみましょう。

SASSの例

$bg_color: #3bbfce;
$link_color: #ffffff;

#header {
    width: 100%;
    height: 90px;
    background: darken($bg_color, 90%);
    ul {
        list-style-type: none;
        li {
            float: left;
            a {
                color: $link_color;
            }
        }
    }
}

上のSASSファイルをコンパイルすると、下記のようなCSSファイルが生成されます。

#header {
    width: 100%;
    height: 90px;
    background: #2ca2af;
}
#header ul {
    list-style-type: none;
}
#header ul li {
    float: left;
}
#header ul li a {
    color: #ffffff;
}

次に、Compassの例を見てみましょう。

Compassの例

@import "compass";

.login-form {
  @include border-radius(5px);
}

上のファイルをコンパイルすると、下記のように各ブラウザ仕様に対応したCSSファイルが生成されます。

.sample {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

Compassのインストール

Compassをインストールすれば、そこにSASSも含まれるので、別途インストールする必要はありません。
また、CompassインストールにはRubyが必要です。
Macで最新版のRubyをインストールするには、下記の記事をご覧ください。

GEMをアップデート

$ sudo gem update --system

Compassをインストール

$ sudo gem install compass

Compassのインストールバージョン確認

$ compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2017 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass