Sass が `calc()` 関数内の変数を解決しないのはなぜですか?

CSS Calc() 関数の Sass 変数: 未解決の変数エラー

Sass の calc() 関数を利用すると、Sass が変数は関数の引数内では認識されません。次のシナリオを考えてみましょう。

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

リテラル値 50px を使用すると期待される結果が生成されますが、$body_padding 変数に切り替えると、calc() 関数内で変数を維持する出力が生成されます。

この問題を解決し、変数を適切に解釈するには、次のコマンドを使用して calc() 関数内で変数を補間することをお勧めします。構文:

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

もう 1 つの実行可能なオプションは、特にこの使用例では、border-box プロパティを利用することです。

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

border-box を使用すると、高さプロパティが確実に含まれます。パディングにより、calc() 関数内でのカスタム計算の必要性が効果的に排除されます。

以上がSass が `calc()` 関数内の変数を解決しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。