如何在 CSS 的 `calc()` 函数中使用 Sass 变量？

Barbara Streisand

发布： 2024-12-02 20:27:11

原创

879 人浏览过

How Can I Use Sass Variables Inside CSS's `calc()` Function?

CSS calc() 函数中的 Sass 变量

将 Sass 变量合并到 calc() 函数中时，可能会出现挑战。例如，在 calc() 中使用像 $body_padding 这样的变量不会自动触发所需的替换。相反，输出类似于以下内容：

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

登录后复制

要纠正这种情况并确保 Sass 识别需要替换 calc() 函数中的变量，请使用插值。使用语法 #{$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中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章