第4章 高度な機能を覚えてSassを使いこなそう

4-8 使いドコロにあった形で補完（インターポレーション）してくれる #{}

インターポレーションとは

$IMG_PATH: '../common/images/';

#main {
	background: url(#{$IMG_PATH}main.png);
}

#main {
  background: url(../common/images/main.png);
}

演算しないようにする

p.sampleA {
	$font-size: 12px;
	$line-height: 30px;
	font: $font-size/$line-height;
}

p.sampleA {
  font: 0.4;
}

p.sampleB {
	$font-size: 12px;
	$line-height: 30px;
	font: #{$font-size}/#{$line-height};
}

p.sampleB {
  font: 12px/30px;
}

演算できない場所で演算する

@for $i from 0 to 3 {
	.mt#{$i * 5} {
		margin-top: 5px * $i;
	}
}

.mt0 {
  margin-top: 0px;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}

アンクォートもしてくれるインターポレーション

＄text: "CSS";

.#{$text}a:after {
	content: "#{$text + Space}";
}

.CSS a:after {
  content: "CSS Space";
}

＄text: CSS;

.#{$text}a:after {
	content: $text + Space;
}

.CSS a:after {
  content: "CSS Space";
}