sass:インターポレーション

20140408.jpg久々の更新はsass/scssについてです!

パッと見た感じ、IDを指定する時に使用する書き方の#{}ですが、sassで利用する時はインターポレーションという呼び方で使用することができます。今回はインターポレーションについて書き留めておこうと思います。

今回は以下のサイトで紹介されている「インターポレーション」についてです。
Sass - チュートリアル

変数はプロパティの値に使えるだけではありません。#{} で括ることによってプロパティ名やセレクタに使うこともできます:

fontを一行書きする時は以下の書き方にしますね。

font:14px/1.4  "Helvetica", "Arial", sans-serif

※これは以下の順番になりますね

font:font-size line-height font-family

これをsassで書く時 line-height が /(スラッシュ)値という書き方になってしまいます。
/を使用すると割り算になってしまいます。
そこで/の後ろを#{}で指定します。

$font-size:16px;
$line-height:1.4;
$font-family:"Helvetica", "Arial", sans-serif;
font:$font-size/#{$line-height} $font-family;

後はコンパイルをすることで、以下のカタチで出力されます。

font:16px/1.4  "Helvetica", "Arial", sans-serif

計算される事無く1.4が出力されました。