SASS @import 导入

@import

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

例如 public.scss

$font-base-color: #333;

在 index.scss 里面使用

@import "public";
$color: #666;
.container {
  border-color: $color;
  color: $font-base-color;
}

注意：跟我们普通 css 里面 @import 的区别

TIP

如下几种方式，都将作为普通 css 语句，不会导入任何 scss 文件

1. 文件拓展名是.css;
2. 文件名以 http:// 开头；
3. 文件名是 url ();
4. @import 包含 media queries。

@import "public.css";
@import url(public);
@import "http://xxx.com/xxx";
// 仅在处于横向模式时，才导入并应用 "landscape" 文件中的样式
@import "landscape" screen and (orientation: landscape);