Почему я не могу использовать переменные sass для определения значения переменной css

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

Я определил переменные 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?

Примечания:

  • Если я использую функцию css calc, это тоже будет работать:
: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.

css sass css-variables dart-sass
person Krzysztof Kaczyński    schedule 20.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

$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};
}
person Temani Afif    schedule 20.12.2020