インターポレーション

インターポレーションとは、数値や変数などの値をSASS上の計算や文字列として扱うことのできる機能で、構文は#{ ... }です。

構文

							#{ SASS上の処理 }
						

演算しないようにする

数値とスラッシュなどの組み合わせで意図しない計算が行われることがあると思います。
インターポレーションを使用することで値をそのまま出力します。

SCSS

CSS(コンパイル後)

演算不可の場所での演算

calc関数内やセレクター内などの場所では演算が行えない箇所がありますが、インターポレーションを使用することで演算を行うことができるようになります。

SCSS

CSS(コンパイル後)

変数の値の展開

クォーテーションで囲われている変数の値はコンパイル後はそのままクォーテーションごと出力します。
インターポレーションを使用することでクォーテーションを取り除いて出力することができます。

SCSS

CSS(コンパイル後)

SASS・SCSS逆引きリファレンス一覧へ戻る