1. 语法和定义方式：

   • CSS变量： 使用--前缀来定义，例如：--primary-color: blue;，可以在任何CSS规则中使用。
   • Sass变量： 使用$符号来定义，例如：$primary-color: blue;，只能在定义它们的作用域内使用。

2. 作用域：

   • CSS变量： 全局作用域，可以在整个文档中访问。
   • Sass变量： 局部作用域，默认只在定义它们的选择器范围内有效，除非使用!global声明为全局变量。

3. 动态性：

   • CSS变量： 可以在运行时动态修改和使用JavaScript进行操作。
   • Sass变量： 在编译时就会被解析并替换为其值，无法在运行时动态修改。

4. 功能：

   • CSS变量： 提供了更大的灵活性，可以用于创建动态主题、响应式设计等。
   • Sass变量： 主要用于简化样式表中的重复内容，提高可维护性。
5. 打包后：

   • CSS变量：

     • 在打包后的 CSS 文件中，CSS 变量将被保留为原样，因为它们的语法直接就是 CSS 的一部分，不需要转换或处理。
     • CSS 变量会保持全局作用域，可以在整个文档中使用和修改
   • Sass变量：
     • 在打包后的CSS文件中，Sass变量将被替换为它们的值，因为它们在编译时就被解析和处理了。
     • Sass 变量的作用域可能会受到影响。如果 Sass 变量在局部作用域中定义，那么在打包后的 CSS 文件中，它们只能在定义它们的选择器范围内使用。如果 Sass 变量被声明为全局变量，那么在打包后的CSS文件中，它们将在整个文件中有效