代码之家 › 专栏 › 技术社区 › Krzysztof KaczyÅski

为什么我不能用sass变量来定义css变量的值

dart-sass sass css

Krzysztof KaczyÅski · 技术社区 · 5 年前

font-size

$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;
}

笔记:

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 我正在使用的文件 网页包5.10.3 和 sass装载机

0 回复 | 直到 5 年前

Temani Afif 5 年前

您需要评估以下所有表达式:

$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};
}

推荐文章