css - CSS calc（）函数中的Sass变量(Sass Variable in CSS calc() function)

Question

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues.

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

Here's my code:

(这是我的代码：)

$body_padding: 50px

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

If I use the literal 50px instead of my body_padding variable, I get exactly what I want.

(如果我使用文字50px而不是我的body_padding变量，那么我得到的正是我想要的。)

However, when I switch to the variable, this is the output:

(但是，当我切换到变量时，这是输出：)

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

How can I get Sass to recognize that it needs to replace the variable within the calc function?

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

  ask by GJK translate from so

Answer 1

Interpolate :

(插值 ：)

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

For this case, border-box would also suffice:

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

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