scss 和 css 的区别
语法差异：
- CSS 使用大括号
{}和分号;来定义样式规则和属性。- SCSS 使用了 Sass 的语法，它允许使用类似编程语言的结构，如变量、嵌套规则、混合（mixins）和继承等。
嵌套规则：
- 在 SCSS 中，你可以嵌套 CSS 规则，这使得代码更易读和组织。
- 在 CSS 中，嵌套规则不被支持，你需要每个规则都分别书写。
变量：
- SCSS 允许你定义变量来存储颜色、字体、尺寸等，以便在整个样式表中重复使用。
混合（Mixins）：
- 在 SCSS 中，你可以定义混合，它类似于函数，可以重复使用一组样式规则。
- CSS 中没有混合的概念，因此你需要手动复制粘贴相同的规则。
继承：
- SCSS 支持使用
@extend关键字来继承一个 CSS 规则到另一个规则中。- CSS 中没有原生的继承机制。
scss变量和css变量的区别
语法和定义方式：
- CSS变量： 使用
--前缀来定义，例如：--primary-color: blue;- Sass变量： 使用
$符号来定义，例如：$primary-color: blue;，只能在定义它们的作用域内使用。动态性：
- CSS变量： 可以在运行时动态修改和使用JavaScript进行操作。
- element.style.setProperty("--main-color", "red");
- Sass变量： 在编译时就会被解析并替换为其值，无法在运行时动态修改。
功能：
- CSS变量： 提供了更大的灵活性，可以用于创建动态主题、响应式设计等。
- Sass变量： 主要用于简化样式表中的重复内容，提高可维护性。sass 变量可以存储的内容更加丰富。
- 打包后：
CSS变量：
- 在打包后的 CSS 文件中，CSS 变量将被保留为原样，因为它们的语法直接就是 CSS 的一部分，不需要转换或处理。
- CSS 变量会保持全局作用域，可以在整个文档中使用和修改
- Sass变量：
- 在打包后的CSS文件中，Sass变量将被替换为它们的值，因为它们在编译时就被解析和处理了。
- Sass 变量的作用域可能会受到影响。如果 Sass 变量在局部作用域中定义，那么在打包后的 CSS 文件中，它们只能在定义它们的选择器范围内使用。如果 Sass 变量被声明为全局变量，那么在打包后的CSS文件中，它们将在整个文件中有效
