sass中的@import指令

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

导入一个scss文件

没有指定scss的扩展名

如果不是下列情况：

• 文件拓展名是 .css；
• 文件名以 https:// 开头；
• 文件名是 url()；
• @import 包含 media queries

那么文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

例如：

在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件

在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件：

• 文件拓展名是 .css；
• 文件名以 https:// 开头；
• 文件名是 url()；
• @import 包含 媒体查询

例如：

用url()的方式导入 scss文件不生效：

局部文件（Partials）

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

利用局部文件，可以把很多样式做成模块化的，然后来导入。

注意：不可以同时存在添加下划线与未添加下划线的同名文件，否则添加下划线的文件将会被忽略。

例如：

嵌套 @import

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

例如：