scss css 使用公共变量

在SCSS (Sassy CSS) 和 CSS 中，使用公共变量（也称为全局变量、主题变量或自定义属性）可以提高代码的可维护性和复用性。这种方法允许你在整个样式表中共享颜色、尺寸等常见值，避免了手动复制粘贴的错误，并且当需要修改时只需在一个地方进行更改。

**如何在SCSS中使用公共变量：**
1. 定义变量: 在`.scss` 文件中，你可以使用 `$variable-name: value;` 来声明变量，例如 `$/primary-color: #007BFF;`
2. 引用变量: 当你需要使用这个变量时，通过 `#{variable-name}` 或者 `&{variable-name}` 的形式，比如 `.button { background-color: #{$/primary-color}; }`
3. 编译成CSS: 使用像`npm run build`这样的命令将SCSS文件编译成CSS，变量会被替换为它们对应的值。

**在CSS中使用预处理器如PostCSS+Babili（旧名Autoprefixer）兼容：**
如果你的项目使用了预处理器（如Sass），在构建工具链中添加PostCSS和Babel插件（如postcss-vars）可以让CSS支持变量。首先，在CSS中引入`@variables`规则，然后使用`var()`函数引用变量，如`background-color: var(--primary-color);`

**相关问题--:**
1. SCSS和纯CSS变量的区别是什么？
2. 如何在HTML中应用这些变量？
3. 有没有什么在线工具可以帮助管理和应用CSS变量？>>