CSS calc（）函数中的Sass变量

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

---

插：

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

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

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

---

尝试这个：

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

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

链接地址: http://www.djcxy.com/p/27433.html

上一篇: Sass Variable in CSS calc() function

下一篇: Click on absolute DIV in Windows mobile firing click on underlying elements