Sass をより効率よく使うための機能４つ厳選

Sass といえば Rails でデフォルトで搭載されている, CSSを描きやすくするためのライブラリだ。「CSSをネスト構造で記述できる」というだけでSassの80%以上使いこなしていると言えるのだと思っているけど、残りの数%について、特に便利なものを調べたのでまとめてみる。

親要素の参照

hover とか、そういうのをネストの中に含めたい時。 &を使って表現できる。

a {
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

変数

よく使う色の値とかを変数にまとめられる。毎回、直にRGB指定する必要がなくなる。 $を要素にすれば代入、値にすれば参照となる。

$width: 5em;

#main {
  width: $width;
}

CSS拡張

ありがちな "btn btn-primary" のような指定を、"btn-primary"だけでよくする。@extendを使って共通部分をインクルードできる。

.btn {
  border: 1px #f00;
  padding: 12px 4px;
  background-color: gray;
}
.btn-primary {
  @extend .btn;
  background-color: blue;
}

関数的な使い方

opacity とか、ブラウザ互換のためにそれぞれを書かなくてもよくなる

@mixin opacity($percent: 0.6) {
  filter:alpha(opacity=$percent * 100);
  -moz-opacity: $percent;
  opacity: $percent;
}

a:hover {
  text-decoration: none;
  @include opacity();
}

おわりに

実際は for とか if とかも書けちゃって、もはや一つの言語のようになっている。ただそれらはCSSではそこまで使用することもないかと思うので、ネスト構造としてだけ使っていたSassユーザーの方はとりあえずこの4つを使いこなせるようになれればさらに効率よくCSSが書けるのではないだろうか。

そのほかの機能は本家ドキュメントを参照してほしい。