scssでcssのメンテナンスを楽にする

　最近はjQueryなどでクライアントサイドでプログラムを書くことが増えてきました。
　一昔前までは、cssはデザイナーの領分だったのですが、プログラマーも理解していないと困るようになってきました。
　しかしプログラマーから見ると、CSSの仕様には以下のような問題点があります。

・変数や定数が存在しないので、結局何箇所も記述して、保守性が悪い
・HTMLの構造のように入れ子を示す構造に対して、リニアに記述するため対応を見るのが難しい。
・マクロやサブルーチンの機能がないので、何度も出てくるパターンを、なんども書くことになります。

　そこで最近出てきたのが、sassとscssです。

　sassは、最初HTMLをインデントを用いて構造を記述するHAMLという記法のサブプロジェクトとして、始まりました。この記法の特徴は、Pythonなどと同じで、インデントで構造を示すことです。このため閉じタグがなくなるなどのメリットがあります。
　しかし、記法が大きく変るととっつき辛く感じるのも事実で、いまいち普及しなかったのですが、旧来の記法を直接拡張したようなscssが出てから、普及が進んでいます。

　scssはrubyで記述されているため、rubyをインストールする必要があります。私のマシンにはruby 1.9.3が入っているので、そのままスタートします。
　最新のrubyを入れているならともかく、新しくないなら、gemをアップデートしておいたほうがいいでしょう。

>gem update --system

　それぞれのコマンドですが、scssには、–sassというオプションがあり、sassには、–scssというオプションがあります。
　では、scssを使ってみましょう。

    scss [options] [INPUT] [OUTPUT]

　INPUTには、ソースファイルを指定します。OUTPUTには出力先のcssファイルを指定します。
　さて、コンパイルを実行してみましょう。
　まず変数が使えるようになります。
　また、//がコメントして使えるようになりますが、このコメントは出力されないので、一般のユーザーには見せたくないものはこちらで書いておくと便利です。

<test001.scss>

@charset "utf-8";
$width:     120px;
$bgcolor:   #ffcccc;

//  消えるコメント
input.std_button {
    background-color:   $bgcolor;
    width:              $width;
}

/*  こちらはそのまま    */
input.small_button {
    background-color:   $bgcolor;
    width:              $width * 0.8;
}

input.large_button {
    background-color:   $bgcolor;
    width:              $width * 1.5;
}

<test001.css>

@charset "UTF-8";
input.std_button {
  background-color: #ffcccc;
  width: 120px; }

/*  こちらはそのまま    */
input.small_button {
  background-color: #ffcccc;
  width: 96px; }

input.large_button {
  background-color: #ffcccc;
  width: 180px; }

　階層構造が使えるようになります。何度も同じセレクターを記述しないで済みます。セレクターの記述ミスが分かりづらいので、チェックがそれぞれ一箇所で済むのはいいですね。

<test002.scss>

div.parts {
    back-color:     #cccccc;
    ul.text {
        display: block;
        li {
            color:      #ff0000;
        }
    }
}

<test002.css>

div.parts {
  back-color: #cccccc; }
  div.parts ul.text {
    display: block; }
    div.parts ul.text li {
      color: #ff0000; }

　最後にmixinです。私はwebデザイナーでないので、あまりブラウザ別対応などは使っていませんが、テーブルの罫線を一括で記述するmixinを作って活用しています。

<import.scss>

@mixin  slim_table($border) {
    td {
        border-right:       $border;
        border-bottom:      $border;
    }
    td.line_t {
        border-top:         $border;
    }
    td.line_l {
        border-left:        $border;
    }
    td.line_tl {
        border-left:        $border;
        border-left:        $border;
    }
}

<test003.scss>

table.shiftplan_entry {
    @include slim_table( $std_border );
}

<test003.css>

table.shiftplan_entry td {
  border-right: solid 1px #999999;
  border-bottom: solid 1px #999999; }
table.shiftplan_entry td.line_t {
  border-top: solid 1px #999999; }
table.shiftplan_entry td.line_l {
  border-left: solid 1px #999999; }
table.shiftplan_entry td.line_tl {
  border-left: solid 1px #999999;
  border-left: solid 1px #999999; }

　実際の仕事では、.scssを修正するたびに、変換を行わなければなりません。毎回修正のたびに、scssを起動するのは面倒です。scssにはwatchという機能があります。ファイルまたはディレクトリを指定して、変更があるごとに、コンパイルを行うことができます。
　以下の指定はカレントの.scssファイルをコンパイルして、../cssにコピーしています。

<watch.bat>

scss -I./lib --watch ./:../css

　駆け足でしたがscssの紹介でした。
　scssで、webデザインを利口にしましょう。

yna