Sass中如何导入文件

在 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{
        color: pink;
    }
}

// second.scss 文件
.f14{
    font-size: 14px;
}
.f16{
    font-size: 16px;
}

如果我们需要将 second.scss 文件导入到 first.scss 文件中，可以像下面这样：

.xkd{
    font-size: 14px;
    p{
        color: pink;
    }
}
@import "./second";

然后执行编译命令：

sass first.scss:first.css --style expanded

上述代码编译后的 CSS 代码，如下所示（first.css）：

.xkd {
  font-size: 14px;
}
.xkd p {
  color: pink;
}

.f14 {
  font-size: 14px;
}

.f16 {
  font-size: 16px;
}

可以看到 second.scss 文件中的代码也成功编译到了 first.css 文件中。

需要注意的是，在 CSS 中@import 指令必须位于文件的顶部，而在 Sass 中 @import 指令则可以位于文件中的任意位置。

由于 Sass 可以兼容原生 CSS 语法，所以我们也可以在 Sass 文件中导入 CSS 文件。

使用SASS部分文件

在一个实际项目中会可能会创建很多 Sass 文件，但是一般不会每个 Sass 文件都有一个对应的 CSS 文件，而是将少数几个 Sass 文件生成 CSS 文件，其他的 Sass 文件则通过 @import 导入到这些 Sass 文件中。一般不需要生成独立 CSS 文件的 Sass文件称为局部文件，Sass 中有特殊的约定来命名这些文件。

Sass 局部文件的文件名以下划线开头，这样 Sass 就不会在编译时单独编译这个文件输出 CSS，而只把这个文件用作导入。当导入局部文件时，可以省略文件名开头的下划线。

示例：

例如现在有一个局部文件 _myfile.scss ，这个文件在编译时不会被生成一个对应的 CSS 文件，而是导入到其他的 Sass 文件中。导入格式如下所示：

@import "_myfile";

嵌套导入

Sass 文件的导入和 CSS 还有一点不同，就是 Sass 支持 import 命令写嵌套语法中，导入的 Sass 局部文件就会被直接插入到 CSS 规则内导入它的地方。

示例：

例如现在有一个局部 Sass 文件 _myfile.scss：

.xkd{
    font-size: 14px;
}

然后将这个局部文件导入到另一个 Sass 文件 style.scss 中：

.div{
    color: #ccc;
    .div-top{
        border: 1px solid #000;
        @import "./myfile";
    }
}

编译成 CSS 代码：

.div {
  color: #ccc;
}
.div .div-top {
  border: 1px solid #000;
}
.div .div-top .xkd {
  font-size: 14px;
}

可以看到编译后的 CSS 文件中，局部文件 _myfile.scss 中的样式，被嵌套在了 .div-top 选择器中。