[SCSS|Sass] 引数に数値を渡して文字列じゃないエラーが出たらインターポレーション

展開したデータを埋め込む

CSS のルール名などに変数の値を使う場合は #{} のインターポレーション機能を使うとよい、という説明はよく見る。
インターポレーションとは、内挿（ないそう）や補間と訳され、Sass コンパイラでは変数を展開した値（式の結果）を埋め込む機能になる。

CSS として書き出す他にも Sass 関数の引数としてデータを渡す際、数値型の値を文字列に展開するといった使い方ができる。
例えば str-length() は渡された文字列の文字数を返す関数なので、数値を渡すとエラーになる。

NG:

$var: 10px; // 単位付きも数値型となる
@debug str-length($var);


Error: $string: 10px is not a string.
@debug str-length($var);
       ^^^^^^^^^^^^^^^^

OK:

$var: 10px;
@debug str-length(#{$var});


Debug: 4

インターポレーション機能で関数に渡すときだけ値を文字列にする。
$var の型は数値型のまま。

技術者ならデータ型は常に意識するものだが、処理中に動的に型変換が行われるスクリプトでプログラミングを学び始めた人には寝耳に水な話。

参考リンク

Sass: Interpolation