CSS calc（）函数中的Sass变量

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试calc()在Sass样式表中使用该函数，但遇到了一些问题。这是我的代码：

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

如果我使用文字50px而不是body_padding变量，那么我得到的正是我想要的。但是，当我切换到变量时，这是输出：

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

如何让Sass认识到它需要替换calc函数中的变量？

回答：

插值：

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

对于这种情况，border-box也足够了：

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

以上是 CSS calc（）函数中的Sass变量 的全部内容， 来源链接： utcz.com/qa/430656.html

回到顶部