csssasscss-calc

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?


Solution

  • 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