第4章高度な機能を覚えてSassを使いこなそう4-4 使いどころに合わせて補完（インターポレーション）してくれる#{}Sample Code

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

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

3
#main {
4
  background: url(#{$imgPath}main.png);
5
}

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

1
p.sampleA {
2
  $font-size: 12px;
3
  $line-height: 30px;
4
  font: $font-size/$line-height;
5
}

1
p.sampleA {
2
  font: 0.4;
3
}

1
p.sampleB {
2
  $font-size: 12px;
3
  $line-height: 30px;
4
  font: #{$font-size}/#{$line-height};
5
}

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

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

1
.mt0 {
2
  margin-top: 0px;
3
}
4

5
.mt5 {
6
  margin-top: 5px;
7
}

1
$property: margin;
2

3
p {
4
  #{$property}-bottom: 0;
5
}

1
p {
2
  margin-bottom: 0;
3
}

1
$text: "CSS";
2

3
.#{$text} a::after {
4
  content: "#{$text} Tips";
5
}

1
.CSS a::after {
2
  content: "CSS Tips";
3
}