SASS | @进口

使用@import 我们可以在我们的主文件中导入 SCSS 或 CSS 文件，所以基本上我们可以将多个文件组合在一起。

句法：

@import 'Relative path to the file1', 'Relative path to the file2', ...; 

我们不必在路径中的文件名后包含 .scss 或 .css 扩展名。您可以根据需要导入任意数量的文件。要了解相对路径，请阅读本文。

1. 将 SCSS 文件导入 SCSS 文件：
   在这里，我们将_放在 .scss 文件的名称之前，它告诉 SASS 编译器该文件不应自行编译。

   优势：
   这样做的主要优点是，我们可以使用@import 组合多个文件，然后编译主文件。因此，作为结果，我们将只有一个 CSS 文件，因此浏览器将不必发出多个 HTTP 请求来加载不同的 CSS 文件。
   _aside_list.scss

   #aside_list {
         
       list-style-type: none;
         
       li {
           color: grey;
           text-align: center;
           width: 40px;
           height: 80px;
           background-color: lightpink;
     
           // Here & is parent selector
           &:hover {
               background-color: pink;
           }
       }
   }
   

   您可以在导入 .scss 文件时保留 _ 和 .scss 扩展名。

   输入文件

   @import "aside_list";
   

   input.scss 的编译文件：output.css

   #aside_list {
     list-style-type: none;
   }
   
   #aside_list li {
     color: grey;
     text-align: center;
     width: 40px;
     height: 80px;
     background-color: lightpink;
   }
   
   #aside_list li:hover {
     background-color: pink;
   }
   

2. 将 CSS 文件导入 SCSS 文件：
   导入 CSS 文件与导入 .scss 文件类似，但不得包含 .css 作为 CSS 文件的扩展名。这样做的主要原因是：CSS 也有 @import 规则，它具有 .css 扩展语法。

   段落.css

   p {
     color: red;
     font-size: 20px;
   }
   

   输入文件

   @import 'paragraph';
   

   input.scss 的编译文件：output.css

   p {
     color: red;
     font-size: 20px;
   }