css - CSS calc() 函数中的 Sass 变量

Question

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

$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 函数中的变量？

Answer 1

Interpolate :

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

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

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