Sass で calc を使用して変数を渡すと無効になります_html/css_WEB-ITnose

はい、また新しい会社が sass を使っているので、また sass を書きます。

それでは、今日遭遇した小さな問題を書き留めておきます

sass で次のコードを書くと

.class{    $padding: 5px;    width: calc(100% - $paddding * 2);}

うーん、普通っぽいですね。 。 。

違います! ！ コンパイル後、このコードは次のようになっていることがわかります。

.class{    width: calc(100% - $padding * 2);}

その後、ブラウザはこの謎のスタイルの行を容赦なく無視します

これは一体何ですか? ！ 秋！

そうですね、sass はコンパイル時に括弧内の変数を文字列として扱うようです。 それで、何をすべきでしょうか？

ははは、はい！ Sass で変数を文字列に結合する方法をまだ覚えていますか? それでおしまい！

.class{    $padding: 5px;    width: calc(100% - #{$paddding * 2});}

OK、解決しました!