CSSのcalc()内でSASSの変数を使う方法

「calc()の計算の中にsassの変数を使いたい!」

というシチュエーションは結構あると思うのですが、単純に次のように書くと…

$hoge:100px;

.main {
 width: calc( 100vw - $hoge );
}

変数が展開されず下記のような残念な結果に。

.main {
 width: calc( 100vw - $hoge );
}

calc()の中で変数を展開したい場合は、変数を#{} で囲みます。

$hoge:100px
.main {
 width: calc( 100vw - #{$hoge} );
}

そうすると意図通りのCSSになります。

.main {
 width: calc( 100vw - 100ｐｘ );
}

この記事へのコメントはありません。

コメント