导入 SASS 或 SCSS 文件

文件导入概述

css 有一个特别不常用的特性，即 @import 规则，它允许在一个 css 文件中导入其他 css 文件。然而，后果是只有执行到 @import 时，浏览器才会去下载其他css文件。

sass 也有一个 @import 规则，但不同的是，sass 的 @import 规则在生成 css 文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

使用 sass 的 @import 规则并不需要指明被导入文件的全名。你可以省略 .sass 或 .scss文件后缀。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在 sass 和 scss 语法之间随意切换。

语法 :

@import "color";

示例

color.scss

$color-red:#FF0036;
$color-blue:#3688FF;

test.scss

@import 'color';
.test-box {
    color: $color-red;
}

编译后的 css

.test-box {
  color: #FF0036;
}

覆盖变量

一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。举例说明：

@import 'color';
$color-red:#009900;
.test-box {
    color: $color-red;
}

嵌套导入

sass 允许 @import 命令写在 css 规则内。这种导入方式下，生成对应的 css 文件时，局部文件会被直接插入到 css 规则内导入它的地方。

如 : 新建一个 span.scss

span{
    color:#FF0036;
}

在 test.scss 局部使用 span.scss

$color-red:#009900;
.test-box {
    color: $color-red;
    @import 'span.scss';
}

编译后 :

.test-box {
  color: #009900;
}
.test-box span {
  color: #FF0036;
}

原生的CSS导入

由于 sass 兼容原生的 css，所以它也支持原生的 CSS @import。尽管通常在 sass 中使用 @import 时，sass 会尝试找到对应的 sass 文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

被导入文件的名字以.css结尾；
被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
被导入文件的名字是CSS的url()值。

这就是说，你不能用 sass 的 @import 直接导入一个原始的 css 文件，因为 sass 会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。