在 Sass 中使用 @import 指令时如何处理样式冲突？

1. 理解样式冲突的原因
   • 在Sass中，样式冲突主要源于多个导入的文件中存在相同的选择器或变量定义。当使用@import将多个样式文件合并时，如果不同文件对同一选择器定义了不同的样式，或者对同一变量有不同的赋值，就会产生冲突。
   • 例如，文件_styles1.scss中定义了h1 {color: red;}，而在_styles2.scss中定义了h1 {color: blue;}，当这两个文件都被导入到main.scss中时，就会出现关于h1元素颜色的样式冲突。
2. 处理选择器冲突
   • 利用导入顺序
     • 按照优先级确定导入顺序。如果希望某个文件中的选择器样式优先应用，可以先导入该文件。例如，如果_styles1.scss中的h1样式应该优先，那么在main.scss中先导入_styles1.scss，再导入_styles2.scss。这样，_styles1.scss中的h1样式会覆盖_styles2.scss中的相同选择器样式。
   • 更具体的选择器
     • 在定义选择器时，使用更具体的选择器来避免冲突。例如，在_styles2.scss中，如果不想被_styles1.scss中的h1样式覆盖，可以将选择器定义为body h1 {color: blue;}，这样在样式的特异性（specificity）上更高，能够优先应用。
   • 命名空间（Namespacing）
     • 在Sass中，可以通过在选择器前添加一个公共的命名空间来避免冲突。例如，创建一个名为_module - styles.scss的文件，其中的所有选择器都以.module -作为前缀，如.module - h1 {color: green;}。当这个文件被导入时，它的选择器与其他文件中的选择器就不容易产生冲突。
3. 处理变量冲突
   • 合理的文件结构和变量作用域
     • 将变量定义在不同的文件中，按照功能或者模块进行划分。例如，将与布局相关的变量定义在_layout - variables.scss中，将与颜色相关的变量定义在_color - variables.scss中。然后根据需要先导入特定的变量文件。
     • 在Sass中，可以利用局部变量和全局变量的概念。如果一个变量只在某个特定的文件或者模块内部使用，可以将其定义为局部变量。如果是多个文件都需要使用的变量，可以定义为全局变量，并在一个主要的变量文件中定义，其他文件通过@import先获取这个变量文件。
   • 变量重命名
     • 如果两个文件中确实存在同名但用途不同的变量冲突，可以对其中一个变量进行重命名。例如，_styles1.scss中有$primary - color: red;，_styles2.scss中有$primary - color: blue;，可以将_styles2.scss中的变量重命名为$secondary - color: blue;来避免冲突。