我有不同的树枝模板,应该用不同的颜色渲染。
除了颜色主题之外,每个模板通过 SASS 的样式都是相同的。
这就是为什么我想在每个模板中设置一个 CSS 变量。
我认为 SASS 变量看起来像这样:
$pim-color: var(--color-primary);
我也已经尝试过类似以下的操作:
@function color($color-name) {
@return var(--color-#{$color-name});
}
$prim-color: color(primary);
但这似乎只是返回一个在我的 CSS 中不起作用的字符串。
你有什么想法我可以如何解决这个问题吗?
亲切的问候,菲尔。
基本上,在 SASS 中,您无法将完整的变量字符串(css-name + css-value)存储到 var 中。但是您可以存储 css 变量的名称并使用 SASS 变量来构建/写入 css 变量。
注意:在这种情况下,您必须在 css-variables/css-code 中单独设置颜色。现在您可以使用 SASS 变量来编写 css 变量。
基本示例:
//### SASS
$var-color-primary: --color-primary;
:root {
#{$var-color-primary}: red;
}
.class {
color: var($var-color-primary);
}
//###> compiles to css
:root {
--color-primary: red;
}
.class {
color: var(--color-primary);
}
按照您在问题中的想法准备额外的 SASS 地图和 SASS 函数,您可以更轻松地使用它:
//### SASS
// setup your colors in a map
$css-color-vars: (
primary: red,
secondary: blue,
);
// automatic write colors of map to css variables using a SASS loop
:root {
@each $color_name, $color in $css-color-vars{
--color-#{$color-name}: #{$color};
}
}
// create function to easy access to css variables
@function css-color-var( $color ){
@return var(--color-#{$color});
}
// use function to advice css variables
.class {
color: css-color-var( primary );
}
//###> compiles to css
:root {
--color-primary: red;
--color-secondary: blue;
}
.class {
color: var(--color-primary);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)