CSS拡張メタ言語「Sass」の概要と導入手順

SassとCompassをつかってCSSを効率作成しよう（1）

　本連載では、CSSの拡張言語であるSassの導入と、Sassを利用したメジャーなCSSフレームワークの1つであるCompassの導入をサンプルを交えて紹介し、最終的には実際にオイシックスで利用しているCSSをSassで書き直した際の実例をご紹介します。

はじめに

　CompassはSassを拡張したツール集で、CSSのフレームワークといわれています。大手企業でも導入されていて、オイシックスでもデザイナーを中心に導入したいという声が上がっていました。

　本連載ではSassの導入から始めて、Compassの実践までご紹介します。まずはじめはSassの導入部分です。WindowsとMac環境での環境構築から動作確認までをご紹介します。

対象読者

• CSSの基礎知識がある方
• SassおよびCompassの導入を検討している方

Sassとは

　Sassは、CSSを拡張したメタ言語です。ではメタ言語とは何かと言うと、プログラム言語を作成する言語といわれています。つまりSassは、CSSを作成するためのメタ言語です。Sassを使ってCSSを作成するのです。

　「だったら最初からCSSを書いた方が早いのでは？」と思うかもしれません。ですがSassを利用すると、効率的にCSSを作成できます。例えばSassを使うと、プログラム言語では当たり前の変数や繰り返し処理を使ってCSSを書くことができます。それだけでも相当のコード量を減らし、作業量の削減にもつながることを理解していただけるのではないでしょうか。

Sassのメリット

　Sassを導入するメリットを具体的なコード例を交えつつ、いくつか挙げてみます。

• 読みやすい
  ネストして書けるので可読性が高いです。

Sass

ul{
    margin:5px;
    li{
        float:left;
    }
}

出力されるCSS

ul {
  margin: 5px;
}
ul li {
  float: left;
}

• 変数や繰り返し処理が使える

Sass

$buttonImgList: cart, label, item;//配列
@each $buttonImg in $buttonImgList {
    div.#{$buttonImg} {
        background-image: url(shared/img/#{$buttonImg}.png);
    }
}

出力されるCSS

div.cart {
  background-image: url(shared/img/cart.png);
}
div.label {
  background-image: url(shared/img/label.png);
}
div.item {
  background-image: url(shared/img/item.png);
}

• 成果物の品質を統一できる
  HTMLの構造に沿ってSassを記載するため、CSSにしたときの成果物のクオリティが同一になります。
   
• 高速化につながる
  Sassでは、CSSコンパイル時にファイルの難読化が設定できますし、複数ファイルを1つのCSSにまとめられるため、ファイルの容量とリクエスト数を減らすことが可能です。
   
• //で1行のコメントが書ける
  CSSを書いている人であれば、皆コメントが面倒だと思っていたのでないでしょうか。Sassでは//を利用して一行コメントが利用できます。
   
• 関数が作れる
  mixinやfuncitonという関数のようなものが使えるため、部品として使いまわすことが可能です。