インターポレーション

#{}(インターポレーション)とは変数が参照できない箇所に記述されても
使うことができる機能です。

主に画像のイメージパスなどに使われます。


sass

$img_path : '../img/bgimage';

section{
 background: url(#{$img_path}.jpg);
}

css(コンパイル後)

section {
  background: url(../img/bgimage.jpg);
}

演算されないようにする

四則演算をさせたくないときにインターポレーションで囲むと演算ではなく記述した文字そのままが出力されます。


sass

$large_size : 36;
$small_size : 12;

section {
 font-size: $large_size / $small_size + px;
}

article{
 font-size: #{$large_size} / #{$small_size} + px;
}

css(コンパイル後)

section {
  font-size: 3px;
}

article {
  font-size: 36 / 12 + px;
}

演算出来ないところで演算する。

先ほどとは逆に演算出来ないところで演算が出来るようにする。
本来ならばセレクタ名を演算処理できないのをインターポレーションを施すことで
演算が可能となります。


sass

@for $value from 1 to 5{
 section#{$value * 2}{
	width: 100 * $value;
	}
}

css(コンパイル後)

section2 {
  width: 100;
}

section4 {
  width: 200;
}

section6 {
  width: 300;
}

section8 {
  width: 400;
}