Search code examples
csssassfontscss-calc

Is there a way to make the calc function work with the * operator in Sass?

I'm trying to setup a default font size and then just use it to get some other font sizes.

$base-font-size: calc(100% + 0.25vw); // this is fine
$font-size--2: $base-font-size * 0.5; // the multiplication causes an error here
$font-size--1: $base-font-size * 0.75;
$font-size-1: $base-font-size * 1.25;

and I get this from the compiler

Error: Undefined operation "calc(100% + 0.25vw) * 0.5". ╷ 14 │ $font-size--2: $base-font-size * 0.5; │ ^^^^^^^^^^^^^^^^^^^^^ ╵ styles.scss 14:16 root stylesheet

Process finished with exit code 65

Solution

  • You have to do the following:

    $base-font-size: calc(100% + 0.25vw); 
$font-size--2: calc(#{$base-font-size} * 0.5);
$font-size--1: calc(#{$base-font-size} * 0.75);
$font-size-1: calc(#{$base-font-size} * 1.25);