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

4-9 使いドコロに合わせて補完（インターポレーション）してくれる #{}

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

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

#main {
    background: url(#{$imgPath}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 2 {
    .mt#{$i * 5} {
        margin-top: 5px * $i;
    }
}

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

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

$text: "CSS";

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

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

※下記のサンプルコードは現在同じ結果になりません。

$text: CSS;

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

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