Sassってなに?

Sass(Syntactically Awesome Stylesheets)とは CSSを記述する為のメタ言語のひとつで、プログラミング言語の仕様を取り入れて効率的にCSSを定義できるようにした言語。
Sassのバージョン3.0からは、CSSの文法・記法を拡張して上記の機能を取り入れたSCSS(Sassy CSS)言語が採用された。
http://e-words.jp/w/Sass.html より抜粋

要するに、CSSの記法を拡張して変数とか、演算とか、ifとか書ける、とっても便利なもの。 似た言語にLESSというのもあります。

とりあえずSass導入の手順とLESSとの比較はとばします。
まず慣れろ。ということで、記法もいきなりSCSSにて。

実際のコンパイル例はこちら ↓

まず基本的な展開の為の設定を書き、

コンパイル設定(config.rb)
http_path = "/"
css_dir = "css"
sass_dir = "scss"
output_style = :expanded
line_comments = false

続いて、こんな感じでscssをゴリゴリ書きます。

コンパイル前(sample.scss)
// Variables
$container-bg: #eee;
$font-size-base: 14px;
$line-height-computed: 1.4;
$lines-to-show: 3;
// Reset
p {
  margin: 0;
}
// Multiline text with ellipsis
// Supported IE and Firefox
.container {
  background: #eee;
  overflow: hidden;
  width: 100%;
  p {
    font-size: $font-size-base;
    height: $font-size-base * $line-height-computed * $lines-to-show;
    line-height: $line-height-computed;
    position: relative;
    &:before,
    &:after {
      background: #eee;
      position: absolute;
    }
    &:before {
      content: "...";
      top: $font-size-base * $line-height-computed * ($lines-to-show - 1);
      right: 0;
    }
    &:after {
      content: "";
      height: 100%;
      width: 100%;
    }
  }
}

scssをコンパイルすると、こんな感じで展開されます。

コンパイル後(sample.css)
p {
  margin: 0;
}
.container {
  background: #eee;
  overflow: hidden;
  width: 100%;
}
.container p {
  font-size: 14px;
  height: 58.8px;
  line-height: 1.4;
  position: relative;
}
.container p:before, .container p:after {
  background: #eee;
  position: absolute;
}
.container p:before {
  content: "...";
  top: 39.2px;
  right: 0;
}
.container p:after {
  content: "";
  height: 100%;
  width: 100%;
}

なんとなく便利さが伝わりましたでしょうか?

@mixinやベンダープレフィックス、演算や条件分岐などを使ってからが本領発揮だと思いますが、私はこれだけで充分便利だなーと感じました。
セレクタを連ねて書く面倒さから解放されるのは大きいですね。

課題

デフォルトのままだとインデントが気に食わない。
→半角2つではなく、タブを使いたい。

config.rbの他の設定項目が気になる。
→試行錯誤中。

既存プロジェクトのcssどうしよう。
→未来を見据えて華麗にスルー?

やっぱりコード規約って大事。
→規約策定頑張るしかない。