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文件：
【SASS @import用法介绍及其示例】导入CSS文件类似于导入.scss文件, 但是你不能包含.css作为CSS文件的扩展名。这样做的主要原因是：CSS还具有@import规则, 该规则具有.css扩展语法。
段落.css