SASS 是一个 CSS 预处理器，它可以让你在编写 CSS 样式表时使用一些现代的编程语言特性，例如嵌套规则、变量、函数等。@import 是 SASS 中的一个关键字，它用于导入另一个 SASS 文件中的代码。
@import 的基本用法
@import 的基本用法非常简单，只需要在 SASS 文件中使用：
@import 'path/to/file';
其中，path/to/file 表示要导入的文件路径，可以是相对路径或绝对路径。例如，如果你的 SASS 文件和要导入的文件在同一个目录中，那么可以使用相对路径：
@import 'foo';
这将导入同一目录中的 foo.scss 或 foo.sass 文件。如果要导入另一个目录中的文件，可以使用相对路径或绝对路径：
@import '../foo/bar'; @import '/path/to/foo/bar';
值得注意的是，SASS 会自动根据文件名后缀来决定导入的文件类型。如果导入的文件名以 .scss 结尾，那么它就是一个 Sass 格式的文件；如果以 .sass 结尾，那么它就是一个 Sass 格式的文件。
@import 的高级用法
除了基本用法以外，@import 还有一些高级用法。
导入多个文件
@import 可以一次导入多个文件，只需要在路径之间使用逗号分隔即可：
@import 'foo', 'bar', 'baz';
注意，导入多个文件时，它们的顺序将影响编译后 CSS 的顺序。
导入目录
@import 还可以导入一个目录，这将导入目录中所有的 Sass 格式文件。例如：
@import 'path/to/directory/';
这将导入 path/to/directory/ 目录中所有的 .scss 和 .sass 文件。如果某个文件名以 _ 开头，则它不会被导入，可以被其他文件导入。例如，假设 path/to/directory/ 中有以下几个文件：
foo.scss_bar.scssbaz.sass
那么，导入该目录时只会导入 foo.scss 和 baz.sass，而 _bar.scss 不会被导入。如果你希望在其他文件中导入 _bar.scss，可以这样写：
@import 'path/to/directory/bar';
这将导入 _bar.scss 文件。
使用别名
如果你经常导入某个特定的文件或目录，可以给它们取一个别名。例如，假设你经常要导入 path/to/some/long/directory/name/styles.scss 文件，可以给它取一个别名：
@import 'path/to/some/long/directory/name/styles.scss' as styles;
这样，之后就可以使用 styles 这个别名来代替路径了：
.foo {
@import 'styles' all;
}其中，all 表示导入所有内容，即不过滤以 _ 开头的文件。
总结
@import 是 SASS 中一个非常有用的关键字，它可以让你轻松地导入其他文件中的代码。除了基本用法以外，@import 还有一些高级用法，例如导入多个文件、导入目录、使用别名等。掌握这些用法，可以让你更加高效地编写 SASS 样式表。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a640f5add4f0e0ffefc167