在 SASS 中使用 CSS 变量有没有可能?

问题描述

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

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

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

@function color($color-name) {@return var(--color-#{$color-name});}$prim-color: 颜色(原色)；

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

你对我如何解决这个问题有什么想法吗?亲切的问候，菲尔.

解决方案

基本上在 SASS 中，您不能将完整的变量字符串 (css-name + css-value) 存储到 var.但是您可以存储css变量的名称并使用SASS变量来构建/写入css变量.

注意:在这种情况下，您必须在 css-variables/css-code 中单独设置颜色.现在可以使用SASS变量来编写css变量了.

基本示例:

//### SAS$var-color-primary: --color-primary;:根 {#{$var-color-primary}:红色；}.班级 {颜色:var($var-color-primary);}//###>编译成 css:根 {--color-primary: 红色;}.班级 {颜色:var(--color-primary);}

准备一个额外的 SASS 地图和 SASS 函数，正如您在问题中所想到的那样，您可以更轻松地使用它:

//### SAS//在地图中设置颜色$css-color-vars: (主要:红色，次要:蓝色，);//使用 SASS 循环自动将地图的颜色写入 css 变量:根 {@每个 $color_name, $css-color-vars 中的 $color{--color-#{$color-name}: #{$color};}}//创建函数以方便访问 css 变量@function css-color-var( $color ){@return var(--color-#{$color});}//使用函数来通知 css 变量.班级 {颜色:css-color-var(primary);}//###>编译成 css:根 {--color-primary: 红色;--color-secondary: 蓝色;}.班级 {颜色:var(--color-primary);}

I have different twig-templates that are supposed to be rendered with different colors.The styling via SASS is the same for each template exept for the color theme.This is why I want to set a CSS variable in each template.I though about a SASS variable that looks like something like this:

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

I've already tried something like the following aswell:

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

$prim-color: color(primary);

But that seems to just return a string which doesn't work in my CSS.

Do you have any ideas how I could solve this?Kind regards, Phil.

解决方案

Basically in SASS you cannot store the complete variables string (css-name + css-value) to a var. But you can store the name of the css variable and use the SASS the variable to build/write the css variable.

Note: in this case you have to setup your colors seperate in css-variables/css-code. Now you can use the SASS variable to write the css variable.

Basic example:

//### 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);
}

Preparing an additional SASS map and SASS function as you thought about in your question you are able to to it more comfortable:

//### 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);
}

这篇关于在 SASS 中使用 CSS 变量有没有可能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！