【scss】#{$変数名}につきまして

Question

scssで変数を参照する際に使われる
#{$変数名}は$変数名と何が違うのでしょうか。
お手数おかけ致しますが、宜しくお願い致します。

Answer 1

$変数名 は値として出力される、
#{$変数名}は文字列として展開されて出力されるって感じです。

$dir: '/img/';
$margin: 5px;
.foo {
  /* $dir は値なので + で文字列連結 */
  background-image: url( $dir + "/foo.img" );
  /* $margin は値として出力されるので、計算してくれる */
  margin-top: $margin + 3px;
}
.bar {
  /* #{$dir}は文字列なので 記述位置にそのまま出力される */
  background-image: url("#{$dir}/foo.jpg");
  /* #{$margin} は文字列なので + 3px がそのまま後ろに付く*/
  margin-top: #{$margin} + 3px;
}

↓

.foo {
  background-image: url("/img/foo.jpg");
  margin-top: 8px;
}

.bar {
  background-image: url("/img/foo.jpg");
  margin-top: 5px + 3px;
}

#{$変数名} が元々そこにある文字列として扱われるので、セレクタを変数にすることができます。

@for $i from 1 through 3 {
  /* { } 内で計算が行われた結果が、そこにある文字列として出力される */
  mt#{$i * 5} {
    margin-top: $i * 5px;
  }
}

↓

mt5 {
  margin-top: 5px;
}
mt10 {
  margin-top: 10px;
}
mt15 {
  margin-top: 15px;
}

！注意

@for $i from 1 through 3 {
  /* #{$変数名}でない変数をセレクタに使おうとするとエラーになる。 */
  mt + ($i * 5) {
    margin-top: $i * 5px;
  }
}

Comments

[l_l]

度々ご説明ありがとうございます。
理解できました。