[ Solved – 3 Answers ] CSS – Sass Variable in CSS calc() function

  • Use the calc() function in a Sass stylesheet, Here’s code:
Css Code
$body_padding: 50px
    padding-top: $body_padding
    height: calc(100% - $body_padding)

If we use the literal 50px instead of body_padding variable, we get exactly what we want.

However, when we switch to the variable, this is the output:

Css Code
body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

How can we get Sass to recognize that it needs to replace the variable within the calc function?


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

For this case, border-box would also suffice:

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


Css Code
$a: 4em;
div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;

You need to interpolate the $var in order to have it print out the 10px there:

Css Code
$var: 10px;
height: calc(100% - #{$var});

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

1 Comment

Click here to post a comment