Sass Variable in CSS calc() function

css, css-calc, sass

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

Problem

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?

Original source