ゴイスーなスタイルシート「Sass」の話をしよう

お久しぶりです。　久々にアフィアフィしてないまともな記事書こうと思いました（笑）

というわけで、今日はゴイスーなスタイルシート「Sass」の導入メリットについて書き殴ります。とはいえ、私もまだSass初心者ですので、突っ込む箇所があれば容赦なくツッコンでもらえると有り難いです。

Sassってなんなの？

Sassは、”Syntactically Awesome StyleSheets”の略で、『サス』と呼びます。その名の通り『構文的にゴイスーなスタイルシート』という意味です。

通常のCSSは、書式は簡単で1日もあれば余裕で基本を学べて、プロパティなどを覚えてしまえば簡単に誰にでも習得できるものです。

しかしそれ故に複雑な事ができないという事もあります。例えば変数や条件分岐、コードの再利用等々。プログラムでは当たり前のように出来る機能がありません。なので同じコードをコピペして、クラス名を変えて再流用。違う箇所はクラス名だけ。子孫セレクタが違うだけ。なんて事が多々ありました。よね？

それを解決する目的で誕生したのがSassです。
四の五の言わずに、まずはSassの例を見てみましょう。

$maincolor: #f00;

#main{
  p {
    margin:0  {
      left:10px;
    }
    strong {
      color:$maincolor;
    }
  }
}

header {
  border: 1px solid #ccc {
    bottom: $maincolor;
  }
}

って書いて、コンパイルすると

#main p {
  margin: 0;
  margin-left: 10px;
}

#main p strong {
  color: #f00;
}

header {
  border: 1px solid #ccc;
  border-bottom: #f00;
}

と生成されます。

関数

上記例に限って注目すべき点は「ネスト出来る」と「関数が使える」点でしょうか。

大して変わらないじゃん。と思いましたか？　しかしサイトが中〜大規模で、マークアップエンジニアが複数居た場合、修正箇所が少ないというのは大きなメリットだと思いませんか？

例えば、Sassを使わないで上記サンプルサイトで使用しているメインカラー（#f00)を修正しようとした場合、今までであれば「#f00」を全CSSファイル検索して置換。なんてやり方だったと思います。それでもまだエディタの一発置換の方が早いと思うかと思います。

しかし複数人のマークアップエンジニアで運用していると想像してみてください。

デザイナから上げられた仕様書には「メインカラー：FF0000（HEX）」と書かれていた場合、人によってはそのままCSS内の記述を「#FF0000」としている可能性も有ります。（逆も然り）そしてその場合の修正作業の内容はどうなるでしょうか。

恐らくメインカラー（#f00）の置換だけでは修正は完了しません。　置換後ブラウザチェックして変わっていない事を知り、firebug等で確認して原因を突き止め「なんだ#ff0000で書いてたのか」と知り修正を穂通し再度アップ。なんだか馬鹿みたいな工程ですよね。

しかしSassが導入されれば、1行目の変数の値

$maincolor: #f00;

#main{
  p {
    margin:0  {
      left:10px;
    }
    strong {
      color:$maincolor;
    }
  }
}

header {
  border: 1px solid #ccc {
    bottom: $maincolor;
  }
}

を修正するだけで、CSS内で指定していたメインカラーを一発で変更することができます。

ネスト

次にサンプルで注目すべき点はネストです。
上記サンプルではイマイチメリットが伝わらないかもしれないので以下のhtmlソースにcssをあてる事を考えて見て下さい。

<div id='main'>
    <section>
        <h1>サンプル見出し</h1>
        <p>パラグラフ〜</p>
        <p class="notice">注意事項</p>
        <ul>
            <li>注意事項その１</li>
            <li>注意事項その２</li>
        </ul>
    </section>
    <section>
        <h1>サンプル見出し</h1>
        <p>パラグラフ</p>
    </section>
</div>

id mainの中の、sectionの中の、pやulに対してつけるスタイルとは別に、pのclassのnoticeにも別のスタイルをあてて、、、　というように階層を考慮しながらスタイルを振っていくと思います。まぁ慣れてしまえば大した手間じゃ有りませんけど、こいつをSassで書こうとすると、

#main {
    section{
        margin-bottom: 1em;
        h1 {
            font-size: 140%;
        }
        p,ul {
            margin-bottom: 1.5em;
        }
        p.notis {
            color: #f00;
        }
    }
}

これで終わりです。何か気付きましたか？

そうです、毎回同じセレクタを記述（コピペ）しなくて済んでいるのです。
cssでの記述に比べ、「#main section」を書かなくて良いので、スッキリと可読性にも優れています。
どうですか？　少し興味出てきましたか？　Sassにはまだまだ便利な機能が沢山あります。

結論ありきの論調で少々強引な感じもしますが、なんとなくメリットは感じて貰えたかと思います。

では、次回はSassの導入についてを書いていきたいと思います。

参考にした書籍