はじめに
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という関数のようなものが使えるため、部品として使いまわすことが可能です。
