SCSS の文字列インターポレーション

SCSS では文字列のインターポレーションに #{ } という書き方ができます。 インターポレーションは SCSS の様々なところで使えます。

次のように mixin を定義して、それをインクルードして使ったとします。

@mixin foo($name, $val) {
  #{$name}: $val * 1px;
}

.c1 {
  @include foo(width, 50);
}

このコードは、次のような CSS にコンパイルされます。

.c1 {
    width: 50px;
}

#{$name} と記述した箇所は、変数 $nameにセットされた文字がそのまま出力されていますね。

SCSS のインターポレーションを使う時の注意点

ここで width のピクセル値を出力するのに、わざわざ $val * 1px としているのはなぜでしょうか。ここも #{$val}px という風にインターポレーションを使って書いてはいけないのでしょうか。

もし、インターポレーションを用いてサイズを記述した場合にどうなるか、考えてみましょう。

この場合、想定通りに mixin を利用する限り、何の問題もありません。しかし、もしこの mixin を使う側が、誤って次のように書いたらどうなるでしょうか。

.c1 {
  @include foo(width, 50px);
}

本来はピクセル値として数値を期待していたのですが、50px という値が渡されています。もし、値もインターポレーションを使って記述していたら、予期せぬ値が設定されることになります。

@mixin foo($name, $val) {
  #{$name}: #{$val}px; // 50pxpx と出力される
}

しかし、もし $val * 1px としていれば、'50px' * 1px という計算はできませんので、コンパイル時点でエラーが発生するので誤りが検出できます。

エラーはなるべく自動的に検出できるのが望ましいので、安易に #{} で値を埋め込まないで、 数値なら一旦計算をいれる方法が良いでしょう。

以上、SCSS の文字列のインターポレーションについて説明しました。