Sassに触れてみた

技術ブログでは、初めまして。
柏倉です。
いつもはコラムの記事などをよく書いていますが、今回は少し技術的な内容の記事です。

仕事でよくホームページを作っていて、HTML,JavaScript,CSSなどを使う機会が多いです。
CSSを使っていて、変数使いたいなー。とか。計算式入れたいなー。なんて思うことはよくあることではないでしょうか？

そこで、そういった不満を一気に解消できるかもしれない、Sassに少し触れてみました。

Sassとは？

Syntactically Awesome StyleSheet
エキサイト翻訳さんに翻訳してみてもらったところ
「統語的に」「物凄い」「スタイルシート」
らしいです。

簡単に言うとすごいスタイルシート!!ですね。

自分が簡単に触れてみて魅力的に思った機能は、

ネストが使えること
変数が使えること
四則演算ができること
@extendにより他クラスを継承できること

です。
普通のプログラムやスクリプトでは当然のようにできることですが、cssではできなかったことだらけです。

CSSとSass(SCSS記法)を見比べる

h2 {
  font-size: 16pt;
  color: #CCC;
  margin: 5px;
}

h2 > a {
  text-decoration: none;
}

h2 > a:hover {
  color: #F00;
}

h3 {
  font-size: 14pt;
  color: #CCC;
  margin: 5px;
}

h3 > a:hover {
  color: #0F0;
}

p {
  font-size: 12pt;
}

$gray: #CCC;
$red: #F00;
$blue: #0F0;
$fontSize: 12pt;

.font-template {
  color: $gray;
  margin: 5px;
}

h2 {
  @extend .font-template;
  font-size: $fontSize + 4;

  > a {
    text-decoration: none;

    & hover {
      color: $red;
    }
  }
}

h3 {
  @extend .font-template;
  font-size: $fontSize + 2;

  > a:hover {
    color: $blue;
  }
}

p {
  font-size: $fontSize;
}

Sass側の機能を解説すると、

1~4行目:変数の定義

$gray: #CCC;
$red: #F00;
$blue: #0F0;
$fontSize: 12pt;

ここで変数の定義をしています。色の指定や文字サイズなど、同じ指定を複数の箇所にいれるようなものは変数で処理できるとメンテナンス性があがりますね。

6~9行目:継承元のスタイル定義

.font-template {
  color: $gray;
  margin: 5px;
}

継承元になるスタイルを定義しています。

12行目:クラスの継承

@extend .font-template;

@extendで事前に定義してあるクラスを継承しています。

13行目:変数の加算

font-size: $fontSize + 4;

変数に対して加算処理をしています。+ の後が単位指定無しなのでpt計算になります。

15~21行目:ネスト

> a {
  text-decoration: none;
}

子セレクタを書く時は > でつなげて記述します。ネストで書くことによって可読性が向上しています。

18~20行目:親セレクタの参照

& hover {
  color: $red;
}

上の階層で指定したセレクタを指定する場合は & でつなげて記述します。

比較してみて

これぐらいの行数だとあまりメリットを感じられないかもしれませんが、量が多くなってきた時のメンテナンスのしやすさは格段によくなってると思います。

導入するにあたって大変そうなこと

Sass自体は一度コンパイルしないとcssとして認識されないのですが、cssにコンパイルされた状態を見ると非常に見づらいです。

.font-template, h2, h3 {
  color: #CCC;
  margin: 5px; }

h2 {
  font-size: 16pt; }
  h2 > a {
    text-decoration: none; }
    h2 > a:hover {
      color: #F00; }

h3 {
  font-size: 14pt; }
  h3 > a:hover {
    color: #0F0; }

p {
  font-size: 12pt; }

複数のextendを使ったりすると、更に見づらくなっていきます。
この状態だと実際ブラウザで動かしてみて、問題が起きた場合デバッグする際に問題点を特定するまでに時間がかかりました。

最後に

まだまだ練度は足りませんが、Sass自体はとてもいいものだと感じました。
もっと勉強して使いこなせるようになりたいと思います。

Sassに限った話ではありませんが、web関連の言語でもどんどん新しいものが増えていきます。
すべてをマスターすることはなかなか難しいと思いますが、新しいことを取り入れて今まで以上に効率的に、また今までできなかったことができるようになりたいですね。