Блог

Я пытаюсь использовать переменные sass и математический оператор sass для определения различных font-size переменных css.

Я определил переменные css следующим образом:

 $base-font-size: 1rem;

:root {
  --font-size-s: #{$base-font-size} * 0.5;
  --font-size-m: #{$base-font-size};
  --font-size-l: #{$base-font-size} * 2;
}
 

Затем в другом файле я использовал свою переменную css следующим образом:

 p {
  font-size: var(--font-size-l);
}
 

Это вообще не работает, мой размер шрифта вообще не меняется. Я подумал, что, возможно, что-то не так с математическими операторами sass, поэтому я попробовал что-то подобное:

 p {
  font-size: 1rem * 2;
}
 

Это сработало, и мой размер шрифта был равен 2rem ожидаемому. После этого открытия я подумал, что, возможно, я делаю что-то не так с переменными sass, поэтому изменил свои переменные css на это:

 :root {
  --font-size-s: 1rem * 0.5;
  --font-size-m: 1rem;
  --font-size-l: 1rem * 2;
}
 

И это не работает! Я действительно не знаю, что я делаю не так. Может кто-нибудь объяснить мне, как я должен определять эти переменные css с помощью переменных sass и математических операторов sass?

Примечания:

• Если я использую calc функцию css, это тоже сработает:

 :root {
  --font-size-s: calc(#{$base-font-size} * 0.5);
  --font-size-m: #{$base-font-size};
  --font-size-l: calc(#{$base-font-size} * 2);
}
 

• Для компиляции .scss файлов я использую Webpack 5.10.3 с css-loader и sass-loader

Вам нужно оценить все выражения, как показано ниже:

 $base-font-size: 1rem;

:root {
  --font-size-s: #{$base-font-size * 0.5};
  --font-size-m: #{$base-font-size};
  --font-size-l: #{$base-font-size * 2};
}