scss和css

Question

考虑以下SCSS：

$color-black: #000000;

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

使用node-sass 版本4.7.2 进行编译时，会生成以下CSS：

body {
    --color: #000000; 
}

当我使用版本 4.8.3或更高版本编译相同的SCSS时，它产生以下内容：

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

我缺少什么？我检查了发布日志，但找不到任何有用的内容。另外，我想知道这种变化是否真实，为什么它只有轻微的版本更改？它应该不是主要版本吗？

另外，我的替代方案是什么？我应该使用插值吗？

Answer 1

只需使用字符串插值：

$color-black: #000000;

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

显然旧的行为并非意图并且违反了SASS的语言规范：

Answer 2

scss和css

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

请参阅Terry的答案以便更好地使用

SCSS：

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

Answer 3

我在使用旧版本的sass时遇到问题。

尝试编译来自数组的变量列表，它会被双破折号卡住。这是我的解决方案，以防有人帮助


$var-element:'--';

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

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

3 个答案:

scss和css