为什么 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})

专门针对此用例的另一个可行选项是利用 border-box 属性：

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

使用 border-box 可确保 height 属性包含填充，有效地消除了 calc() 函数中自定义计算的需要。

以上是为什么 Sass 不解析 calc() 函数内部的变量？的详细内容。更多信息请关注PHP中文网其他相关文章！