TL;DR:如何使用 SCSS 让 CSS 变量为旧版浏览器提供回退。
我正在尝试理解这个 article .在我看来,您必须已经是高级 SASS 用户才能理解它,但我不是。更糟糕的是,这是我找到的唯一一篇关于该主题的文章。
这是我要实现的目标:
我的 scss 应该是这样的:
body {
@include v(background-color, primary)
}
那么处理后的CSS应该是
body{
background: yellow; /* Yellow being defined above as the primary color */
background: var(--color-primary);
}
通过尝试,我已经可以像这样获取 CSS 变量的值:
$colors: (
primary: yellow,
);
:root {
@each $name, $color in $colors {
--color-#{$name}: $color;
}
}
@mixin background-color($color_) {
background: var(--color-#{$color_});
}
使用方法:
body{
@include background-color(primary);
}
这将导致:
body {
background: var(--color-primary);
/* But the fallback is missing :(, I tried things with the map-get but it's really eluding me... */
}
最佳答案
如果您使用的是 Sass,则可以通过 Sass 混入自动执行回退。创建一个 CSS 变量名称及其值的映射,然后您可以在输出后备样式和首选样式的混合中查找这些值
$vars: (
primary: yellow,
);
:root {
--primary: map-get($vars, primary);
}
@mixin var($property, $varName) {
#{$property}: map-get($vars, $varName);
#{$property}: var(--#{$varName});
}
上面的 mixin 是这样使用的:
body {
@include var(background-color, primary);
}
并输出以下 CSS:
:root {
--primary: yellow;
}
body {
background-color: yellow;
background-color: var(--primary);
}
Et voilà :)
关于具有旧浏览器后备功能的 CSS 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44271920/