gulp-sass 4.1.0下SASS变量转CSS自定义变量编译报错解决

问题背景 #

需要通过JavaScript修改样式变量来批量调整多个元素的颜色，因此尝试将SASS变量导出为CSS原生变量。按照SASS官方写法编写代码后，在搭载gulpfile.js的Node.js环境、使用gulp-sass 4.1.0版本编译时抛出错误。

报错信息 #

Error in plugin "sass" Message:
dev\sass\_settings.sass Error: Invalid CSS after "$primary-color: #ff2aad;": 
expected 1 selector or at-rule, was "root: {"
    on line 5 of dev/sass/_settings.sass
    from line 1 of dev/sass/style.sass
    $primary-color: #ff2aad;

原始代码 #

$primary-color: #ff2aad

:root
  --primary-color: #{$primary-color}

删除:root相关的CSS变量定义代码后编译即可正常通过，需要找到可行方案实现JavaScript操作SASS变量。

解决方案 #

只需在:root选择器前添加反斜杠转义即可正常编译，最终可运行的SASS代码如下（已修正原示例中CSS变量调用的语法笔误）：

$primary_color: #ff2aad

\:root
  --primary_color: #{$primary_color}

h1 
  color: var(--primary_color);

该方案暂无对应官方文档说明，但实际运行无报错或其他异常问题。

内容的提问来源于stack exchange，提问作者Marcus Harting