代码之家 › 专栏 › 技术社区 › Harshal Patil

无法将SCSS变量设置为CSS变量?

sass css

Harshal Patil · 技术社区 · 6 年前

考虑以下SCS:

$color-black: #000000;

body {
    --color: $color-black;
}

使用节点sass编译时 版本4.7.2 ,它生成以下CSS:

body {
    --color: #000000; 
}

当我用版本编译相同的SCS时 4.8.3或更高 ,它会产生以下结果:

body {
    --color: $color-black; 
}

我错过了什么? 我查看了发布日志,但没有找到任何有用的内容。另外,我想知道这个更改是否是真的,为什么它只有很小的版本更改?它不应该是一个主要版本吗?

而且 我的选择是什么? 我应该使用插值 ?

3 回复 | 直到 6 年前

Terry 6 年前

只需使用字符串插值:

$color-black: #000000;

body {
    --color: #{$color-black};
}

显然,旧行为不是故意的,违反了SASS的语言规范:

Persijn 6 年前

SCS和css

我找到了一种将scss变量映射到css变量的解决方法。

查看Terry的答案,以更好地使用

SCS:

// sass variable map 
$colors: (
  color-black: #FFBB00
);

// loop over each name, color
:root {
  // each item in color map
  @each $name, $color in $colors {
    --#{$name}: #{$color};
  }
}

Css:

:root {
  --color-black: #FFBB00;
}

controlZed 5 年前

我对旧的sass版本有问题。

试图编译来自数组的变量列表时,会遇到双破折号。这是我的解决方案,以防对某人有所帮助


$var-element:'--';

:root {
    @each $color in $color-variables {
     #{$var-element}#{nth($color, 1)}: #{nth($color, 2)};   
    }
}

推荐文章

delves · Sass不识别变量

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

Henry · scss或css中的calc函数不起作用

2 年前

Nam Van · 如何在React中使用自定义主题颜色。js,CSS(SCSS)模块,Bootstrap5

2 年前

rook99 · 无法加载图标的字体

6 年前

Glen Elkins · SASS新手-不编译

6 年前

Toki · SASS在Sublime Text-Compile main中。保存任何@导入文件时的scss

6 年前

zed · 防止SCS编译CSS变量-Angular CLI

6 年前

sliptype · 使用Webpack提取CSS时抑制模块输出

6 年前