在 CSS 中我们可以通过 @import
指令将一个 css
文件导入到另一个 css
文件中。但是它有一个需要注意的地方,就是只有执行到 @import
指令时,浏览器才会去下载其他 css
文件,这导致页面加载起来特别慢,所以并不太常用。
而 Sass 语言中同样支持 @import
指令的使用,并且与 CSS 中有一些区别,下面我们来看一下 Sass 中是如何使用 @import
指令导入文件的。
Sass 导入文件
Sass 中也有一个 @import
规则,但是与 CSS 有一些不同,CSS 中 @import
指令在每次调用时,都会都会创建一个额外的 HTTP 请求。Sass 中的 @import
规则在生成 CSS
文件时就把相关文件导入进来,不需要额外的 HTTP 请求。
在导入 Sass 文件时,可以不用导入文件的全名,省略 .sass
或者 .scss
后缀名。这样在不修改样式表的前提下,就可以修改被导入的 Sass 样式文件语法,在 sass
和 scss
语法之间随意切换。
示例:
例如已知现有两个Sass 文件:
// first.scss 文件
.xkd{
font-size: 14px;
p{