如何通过dart-sass/node-sass解析并获取SCSS/Sass变量

当然可以实现这个需求！dart-sass本身并没有直接提供返回变量列表的API，但我们可以通过自定义Sass函数的方式，在编译过程中主动捕获并收集变量信息。下面是具体的实现步骤：

方法思路 #

我们会在SCSS文件中调用一个自定义函数，将需要捕获的变量传递进去；然后在Node.js脚本里定义这个函数，把接收到的变量值存储下来——这样既能正常编译CSS，又能拿到我们需要的变量信息。

具体实现 #

1. 修改你的SCSS文件 #

在style.scss里添加一行自定义函数调用，把要捕获的变量传进去（如果有多个变量，就多次调用或者批量传递）：

$md: 768px;
.class { min-height: 0; }

// 调用自定义函数传递变量
@get-variable('md', $md);

2. 编写Node.js脚本 #

在渲染SCSS时，通过functions选项定义get-variable函数，用来收集变量：

const path = require('path');
const sass = require('sass');

// 用来存储捕获到的变量
const scssVariables = {};

const res = sass.renderSync({
  file: path.join(__dirname, 'style.scss'),
  // 定义自定义Sass函数
  functions: {
    'get-variable($name, $value)': (name, value) => {
      // 将变量名和值存入对象
      scssVariables[name.getValue()] = value.getValue();
      // 返回一个空值，不影响CSS编译
      return sass.types.Null.NULL;
    }
  }
});

// 输出编译后的CSS
console.log('编译后的CSS:\n', res.css.toString());
// 输出捕获到的变量
console.log('捕获到的SCSS变量:\n', scssVariables);

3. 运行结果 #

执行脚本后，你会看到：

编译后的CSS:
 .class { min-height: 0; }

捕获到的SCSS变量:
 { md: 768 }

额外说明 #

• 如果需要捕获多个变量，你可以封装一个mixin来批量处理，避免重复写@get-variable：

  @mixin capture-variables($vars...) {
    @each $name, $value in $vars {
      @get-variable($name, $value);
    }
  }
  
  // 使用示例
  $md: 768px;
  $lg: 1024px;
  @include capture-variables(('md': $md, 'lg': $lg));
  

• 变量值会被解析为对应的JS类型（比如长度单位会转为数字，如果需要保留单位字符串，可以用value.toString()代替value.getValue()）。

内容的提问来源于stack exchange，提问作者Yahor Vaziyanau