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

【问题标题】：Is there any possibilty using CSS-variables in SASS?是否有可能在 SASS 中使用 CSS 变量？
【发布时间】：2022-01-09 04:05:59
【问题描述】：

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

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

我已经尝试过类似以下的方法：

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

$prim-color: color(primary);

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

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

【问题讨论】：

标签： css sass

【解决方案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);
}

【讨论】：

【解决方案2】：

获取字符串


$pim-color: #{"var(--color-primary)"};

【讨论】：