cereal_killer cereal_killer - 2 months ago 23
Sass (Sass) Question

SCSS nest Calc-variables in Calc-Variable

How can I link an variable with an calc-value in another variable?

What i do:

$height: 25px;
$size: calc(#{$height} - 10px);
$margin: calc(#{$radiosize} /4);
$padding: calc(#{$radiosize} *2);


What happens:

$height: 25px;
$size: 15px;
$margin: /*does not work*/;
$padding: /*does not work*/;

Answer

You cannot nest calc() function inside another calc().

Current compiled CSS:

margin: calc(calc(25px - 10px) /4); /* Incorrect syntax */
padding: calc(calc(25px - 10px) *2); /* Incorrect syntax */

Solution:

Calculate the size variable directly.

$size: $height - 10px;

Forked Codepen

Comments