Sass Variable in CSS calc() function

问题:

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. 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. 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?

回答1:

Interpolate:

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

For this case, border-box would also suffice:

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

回答2:

Try this:

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

文章来源: Sass Variable in CSS calc() function