是否有可能在 SASS 中使用 CSS 变量？

Question

我有不同的树枝模板，应该用不同的颜色渲染。除了颜色主题之外，每个模板通过 SASS 的样式都是相同的。这就是为什么我想在每个模板中设置一个 CSS 变量。我认为 SASS 变量看起来像这样：

$pim-color: var(--color-primary);

我也已经尝试过类似以下的操作：

@function color($color-name) {
    @return var(--color-#{$color-name});
}

$prim-color: color(primary);

但这似乎只是返回一个在我的 CSS 中不起作用的字符串。

你有什么想法我可以如何解决这个问题吗？亲切的问候，菲尔。

Answer 1

基本上，在 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);
}