SASS @import用法介绍及其示例

使用@import可以将SCSS或CSS文件导入到主文件中, 因此基本上可以将多个文件组合在一起。

语法如下：

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

我们不必在路径中的文件名之后包括.scss或.css扩展名。你可以导入任意数量的文件。要了解相对路径本文.

将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扩展名。

input.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;
}

将CSS文件导入SCSS文件：

导入CSS文件类似于导入.scss文件, 但是你不能包含.css作为CSS文件的扩展名。这样做的主要原因是：CSS还具有@import规则, 该规则具有.css扩展语法。

段落.css

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

input.scss

@import 'paragraph' ;

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

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

---