CODEWITHSUNDEEP
sass
Magnus
Magnus

Reputation: 3722

Is it possible to assign the result of `calc()` to a sass/scss variable?

I tried to assign the result of calc() to a scss variable like so:

$header-height: 100px;
$max-canvas-square-size: calc(100vh - #{$header-height});

@media screen and (min-width: #{$max-canvas-square-size}) {
   // Do stuff
}

... but it doesn't seem to work. $max-canvas-square-size gets evaluated as 0px. Is it just not permitted to save the result of a calc() to a variable?

Upvotes: 1

Views: 394

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18649

It is not possible to save the result of calc() to a Sass variable.

Sass and its variables are compiled down to CSS during development, whereas calc() is performed at runtime in browser. Sass variables themselves never make it into the actual stylesheet or browser, as they exist just to aid development - only their values make it to CSS.

Upvotes: 3

Related Questions