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?
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
To use $variables
inside your calc()
of the height property:
HTML:
<div></div>
SCSS:
$a: 4em;
div {
height: calc(#{$a} + 7px);
background: #e53b2c;
}