Sassで文字列を変数に用いる インターポレーション

Sassで変数的に値を用いる方法は次の記事に書いたが、ここで用いることができる変数はあくまでCSSで用いることが出来る「20px」といったものに限られていたた。

Sassにおける $変数名 @mixin @include @extend

インターポレーションというSassで使用できる機能を用いることで、文字列を変数として扱うことが出来る。

変数を宣言する場合
$variable: “.box”

文字列を呼び出すには、#{}で変数名を囲む
#{$variable}

インターポレーションとは、文字列に埋め込まれた特定の記述を評価して、値を挿入するシステムである。

See the Pen used sass variable inter by nakanishi (@nakanishi) on CodePen.

特にBEMに基づいてクラスを設計している場合に、あるエレメントが他のエレメントを指定する場合に、インターポレーションが有用である。

次のように指定することで、そのネストまでのブロック名もしくはエレメント名までを取得できる。

$variable: &

See the Pen used bem block interporation by nakanishi (@nakanishi) on CodePen.