スタイルシートを楽しくする Sass & Compass を導入してみる

2014-04-06 / Tech

最近は HTML/CSS を書くのが仕事になった。CSS は、半年前までは何となくで書いてきたが、この頃は、マークアップされた HTML に思い通りのデザインを CSS で載せられるようになった。

その日々の CSS コーディングをする中で繰り返し作業が多くなってきたことに気付いた。例えば、CSS リセットとかレスポンシブサイトのグリッドの記述、header nav, header nav ul, header nav ul li のようなセレクタの重複表現。なんかこういうのを解決する方法ないのんと思っていたら、Sass とか Compass とかが便利で流行りみたいだ。

Sass

Sass: Syntactically Awesome Style Sheets は、CSS を効率よく書ける拡張機能。プログラム言語みたいに、16 進数の色を変数として持てたり、繰り返しの記述がなるべく減るように再利用可能なパーツを取り扱える。

CSS と同じように書けて、それに便利な機能追加されているイメージ（だと思う）。Sass は、.scss という拡張子である。html ファイルはこれを扱えないので .scss から .css にコンパイルする必要がある。面倒だけれど、使われるからには便利なのだろう。

Sass はプログラミング言語 Ruby で書かれているので利用する環境に Ruby がインストールされていることが前提となりますが、Mac OS X にはもともとインストールされている。ターミナルで、次のコマンドを実行すれば、インストールされます（パスワードが求められます）。

$ sudo gem install sass

Compass

Compass は、Sass 用の便利なツールが詰まったフレームワーク。Sass のミックスイン（少ない記述で異なるブラウザ間に対応した CSS や、再利用可能でパラメータによって変更可能な要素を出力してくれる便利な関数）などをライブラリ化している。

画像ファイルの幅や高さを自動計算してくれたり、画像のスプライト化を自動でやってくれる機能もある。Compass で Sass をコンパイルして実際の CSS を作成する。インストールするには、次のコマンドを実行すれば OK です。

$ sudo gem install compass

Compass プロジェクトを作成

適当な場所で次のコマンドを実行します。

$ compass create sample
directory sample/
directory sample/sass/
directory sample/stylesheets/
   create sample/config.rb
   create sample/sass/screen.scss
   create sample/sass/print.scss
   create sample/sass/ie.scss
   create sample/stylesheets/ie.css
   create sample/stylesheets/print.css
   create sample/stylesheets/screen.css

...

To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>

sass フォルダに、これから編集する sass ファイルが、stylesheets フォルダにコンパイル後の css が格納されています。

sample フォルダに移動して、compass compile コマンドでコンパイル出来る。ここでは、まだ何も変更していないので unchanged と言われた。

$ cd sample
$ compass compile
unchanged sass/ie.scss
unchanged sass/print.scss
unchanged sass/screen.scss

Sass を実際に書いてみる  

変数の利用とネスト化を試してみます。sass/screen.scss に以下の内容を記述しました。

@import "compass/reset"; が「CSS リセット」の宣言に当たります（1）。また、色と値を変数で持ってみました（2）。Sass 変数は、$ が冒頭に付きます。また、Sass では、セレクタのネスト化が出来ます。このサイトの一部分を Sass のネスト化で記述してみました（3）。

@import "compass/reset"; // 1
@include reset-html5;

$border-color: #ddd; // 2
$margin-right-value: 6px;
nav {
  // 3
  border-bottom: 1px solid $border-color;
  background-color: #f7f8fb;
  margin: 0 auto;
  ul {
    text-align: center;
    li {
      margin-right: $margin-right-value;
      display: inline;
      &:last-child {
        margin-right: 0;
      }
      img {
        margin-right: $margin-right-value;
      }
      a {
        color: #2b2b2b;
      }
    }
  }
}

compass compile でコンパイルすると stylesheets/screen.css に先ほどの変更が出力されます。

/* CSS リセット箇所を省略 */

nav {
  border-bottom: 1px solid #dddddd;
  background-color: #f7f8fb;
  margin: 0 auto;
}
nav ul {
  text-align: center;
}
nav ul li {
  margin-right: 6px;
  display: inline;
}
nav ul li:last-child {
  margin-right: 0;
}
nav ul li img {
  margin-right: 6px;
}
nav ul li a {
  color: #2b2b2b;
}

このように、Sass を使えば、セレクタの繰り返しのような入力作業を大幅に減らし、読みやすさが得られています。慣れるには時間が掛かりそうですが、Sass のミックスインが便利そうなので勉強していきたいと思います。スタイルシートを楽しくしよう！

参考

Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために (DESIGN & WEB TECHNOLOGY)