CSS calc（）函数中的Sass变量

一尘不染

css

我正在尝试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函数中的变量？

阅读 897

2020-05-16

共1个答案

一尘不染

插值：

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

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

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

2020-05-16