CSS calc（）函数中的Sassvariables

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

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

如果我使用文字50px而不是我的body_paddingvariables，我得到了我想要的。 但是，当我切换到variables，这是输出：

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

我如何让Sass认识到它需要replacecalc函数中的variables？

Answer 1

插：

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

对于这种情况， 边界框也足够了：

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

Answer 2

尝试这个：

 @mixin heightBox($body_padding){ height: calc(100% - $body_padding); } body{ @include heightBox(100% - 25%); box-sizing: border-box padding:10px; } 

Answer 3

尝试这个：

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

100vh，使元素成为视口的整个高度