提问



我试图在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})


对于这种情况,边框也足够了:[10]


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

其它参考1


尝试这个:


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

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