CSS の `calc()` 関数内で Sass 変数を使用するにはどうすればよいですか?

CSS calc() 関数内の Sass 変数

Sass 変数を calc() 関数に組み込む場合、問題が発生する可能性があります。たとえば、calc() 内で $body_padding のような変数を使用しても、必要な置換は自動的にトリガーされません。代わりに、出力は次のようになります。

body {
    padding-top: 50px;
    height: calc(100% - $body_padding);
}

この状況を修正し、calc() 関数内の変数を置換する必要があることを Sass に確実に認識させるには、補間を使用します。構文 #{$body_padding} を使用して変数を補間します:

body
    height: calc(100% - #{$body_padding})

または、border-box プロパティを使用することでも、この問題を効果的に解決できます:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

これらのメソッドを使用すると、Sass calc() 関数内の変数を正しく解釈して置換し、目的の計算を実現するようになりました。

以上がCSS の `calc()` 関数内で Sass 変数を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。