详细解释Sass 中的 @import 指令

1. 基本概念
   • 在Sass中，@import指令用于导入其他的Sass或SCSS文件。这使得在大型项目中，可以将样式表拆分成多个较小的、可管理的部分，类似于在编程语言中导入模块或库。
   • 例如，如果有一个名为_variables.scss的文件，其中定义了项目中的变量，和一个名为main.scss的主样式文件，可以在main.scss中使用@import来引入_variables.scss。
2. 与CSS中@import的区别
   • 在CSS中，@import规则必须放在样式表的顶部，并且在加载时会导致额外的HTTP请求（对于每个导入的文件）。这可能会影响页面的加载速度。
   • 而在Sass中，@import指令在编译过程中被处理。Sass会将所有导入的文件合并成一个单独的CSS文件，减少了HTTP请求的数量，提高了性能。例如，当编译一个包含多个@import指令的main.scss文件时，最终会生成一个完整的main.css文件，其中包含了所有导入部分的样式。
3. 部分文件（Partials）导入
   • 在Sass中，以_开头的文件被视为部分文件，如_reset.scss或_mixins.scss。这些文件的目的是被导入到其他Sass文件中，而不是直接编译成独立的CSS文件。
   • 当使用@import导入部分文件时，可以省略文件名前面的_和文件扩展名。例如，如果要导入_mixins.scss文件到main.scss中，可以这样写：

   @import'mixins';
   

4. 导入顺序
   • 导入的顺序很重要，因为后面导入的样式可以覆盖前面导入的样式。例如，如果有一个_base.scss文件定义了一些基本的样式，然后有一个_theme.scss文件定义了特定于主题的样式，并且_theme.scss中的某些样式会覆盖_base.scss中的样式，那么应该先导入_base.scss，再导入_theme.scss：

   @import 'base';
   @import 'theme';
   

5. 嵌套导入
   • @import指令可以在嵌套的规则内部使用。这在需要为特定的选择器范围导入样式时很有用。例如：

   .sidebar {
     @import 'sidebar - styles';
   }
   

   • 这里，sidebar - styles.scss中的样式将只应用于具有sidebar类的元素及其内部元素（取决于sidebar - styles.scss中的具体样式定义）。
6. 媒体查询中的导入
   • 可以在媒体查询内部使用@import指令。例如：

   @media screen and (min - width: 768px) {
     @import 'tablet - styles';
   }
   

   • 这意味着tablet - styles.scss中的样式将只在屏幕宽度大于等于768px时应用。