scss怎么使用js的变量

在SCSS（Sassy CSS）中，你可以通过JavaScript的变量来管理全局的颜色、尺寸等样式值，这可以提高代码的复用性和维护性。要使用JavaScript变量（也称为`data variables`或`custom properties`），你需要按照以下步骤操作：

1. **设置变量**:
首先，在JavaScript文件中定义变量，例如：

   document.documentElement.style.setProperty('--primary-color', 'red');

2. **引入变量到SCSS**:
SCSS本身并不直接支持JavaScript变量，但你可以利用工具如Node.js的`postcss-scss`插件配合`postcss-custom-properties`来让它们生效。在你的项目配置文件（如`.postcssrc.js`）中启用这个功能。

   module.exports = {
     plugins: [
       require('postcss-scss'),
       require('postcss-custom-properties')({
         propMap: (key) => key.replace(/-/g, '--'),
       }),
     ],
   };

3. **在SCSS中引用变量**:
使用双波浪线（`--`）前缀来访问这些变量：

   $primary-color: var(--primary-color);
   
   button {
     background-color: $primary-color;
   }

4. **编译CSS**:
使用像`npm run build`之类的命令，通过构建工具（如Webpack、Rollup等）将SCSS编译成CSS，这时变量就会应用到最终的CSS样式中。