@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:
- 如果文件的扩展名是 .css。
- 如果文件名以 http:// 开头。
- 如果文件名是 url()。
- 如果 @import 包含了任何媒体查询(media queries)。
如果上述情况都没有出现,并且扩展名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名, Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。
例如:
@import "foo.scss";
或
@import "foo";
两者都将引入 foo.scss 文件, 而
@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);
也可以通过一个 @import 引入多个文件。例如:
@import "rounded-corners", "text-shadow";
将引入 rounded-corners 和 text-shadow 两个文件。
如果你有一个 SCSS 或 Sass 文件需要引入, 但是你又不希望它被编译为一个 CSS 文件, 这时,你就可以在文件名前面加一个下划线,就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文件名前面的下划线。
例如,你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了, 而且你还可以这样做:
@import "colors";//不用加下划线
来引入 _colors.scss 文件。
注意,在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如,
_colors.scss 不能与
colors.scss 并存。