CSS

[ 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
body
    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?

Interpolate:

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

For this case, border-box would also suffice:

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

CSS(SCSS) :

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});
READ  [Solved - 11 Answers] CSS - HTML - Space between two rows in a table

About the author

author

author

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.

X