简介

说明

本文介绍Scss的@import的用法。

概述

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

Sass 在当前地址，或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件，如果需要设定其他地址，可以用 :load_paths 选项，或者在命令行中输入 --load-path 命令。

文件名

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

下边两种都会导入文件 foo.scss

@import "foo.scss";

或

@import "foo";

其他示例

扫描二维码关注公众号，回复： 14413222 查看本文章

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

编译为

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

@import "rounded-corners", "text-shadow";

导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

编译为

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

Sass可以通过@import导入其他Sass源文件，被导入的文件就是局部文件，局部文件让Sass模块化编写更加容易。

通常不希望局部文件被编译，因为局部文件是用来被导入到其他文件的。如果不想局部文件被编译，文件名可以以下划线（_）开头。

示例

假设我们有一个局部文件： _colors.scss，该文件会被导入到styles.scss文件，然后styles.scss会被编译为styles.css。

_colors.scss文件内容：

$primary-color: orange;
$secondary-color: gold;

styles.scss使用@import导入局部文件，styles.scss内容如下：

@import "colors";

body {
  color: $primary-color;
  background: $secondary-color;
}

使用@import导入局部文件_color.scss时，可以省略下划线和扩展名，即下边两种是一样的：

@import "colors";

@import "_colors.scss"

说明

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

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

示例

假设 example.scss 文件包含以下样式：

.example {
  color: red;
}

然后导入到 #main 样式内

#main {
  @import "example";
}

将会被编译为

#main .example {
  color: red;
}