0.625rem‬ isn't a valid CSS value

Question

I'm compiling my stylesheets with Laravel Mix.

When I add the following variable:

$font-size-micro: $font-size-base * .625‬;

The $font-base: 1rem so this should render a 10px font-size but I get this error: 0.625rem isn't a valid CSS value.

Anyone with this error?

Answer 1

Just wrap your calculation in parenthesis like:

$font-size-micro: ($font-size-base * 0.625)‬;

Consider the following SCSS;

.xyz {

  $font-size-base: 1rem;
  $font-size-micro: ($font-size-base * 0.625)‬;

  font-size: $font-size-micro;
}

It should produce the CSS as:

@charset "UTF-8";
.xyz {
  font-size: 0.625rem ‬;
}