GJK GJK - 2 months ago 43
Sass (Sass) Question

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?

sam sam
Answer

Interpolate:

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

For this case, border-box would also suffice:

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