如何解决为什么我不能使用 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;
}
这不起作用!我真的不知道我做错了什么。有人可以向我解释我应该如何使用 sass 变量和 sass 数学运算符定义这些 css 变量吗?
注意事项:
- 如果我使用 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
解决方法
你需要像下面这样计算所有的表达式:
$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};
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。