什么是 Sass
Sass（Syntactically Awesome Stylesheets）是一种 CSS 预处理器（CSS pre-processor），它可以让我们更方便地编写 CSS。Sass 引入了很多新的特性，如变量、嵌套规则、混合（mixin）等。同时，它还可以通过扩展名 .sass 或 .scss 编写。其中，.scss 是 Sass 的一种新语法，它与 CSS 更加相似，因此更容易学习和使用。
Sass @import 指令
在 Sass 中，我们可以使用 @import 指令来导入其他样式表。这个指令有两种用法：
- 导入 .scss 或 .sass 样式表
- 导入普通 CSS 样式表
导入 .scss 或 .sass 样式表
要导入一个 .scss 或 .sass 样式表，只需要在当前 .scss 或 .sass 样式表中使用 @import 指令即可，例如：
// _variables.scss
$primary-color: #007bff;
// main.scss
@import 'variables';
body {
color: $primary-color;
}在上面的例子中，main.scss 中通过 @import 导入了 _variables.scss。在 main.scss 中，我们可以使用 _variables.scss 中定义的变量 $primary-color。
注意，我们在 @import 语句中省略了 _ 前缀。这是因为在 Sass 中，使用 _ 开头的名称视为“局部文件”，意味着这是一个不需要直接编译为 CSS 的文件。
导入普通 CSS 样式表
要导入普通的 CSS 样式表，可以在 @import 语句中指定文件名称，并将文件扩展名设置为 .css，例如：
// main.scss @import 'reset.css';
在上面的例子中，我们将 reset.css 文件导入到 main.scss 中。
Sass 中的多重导入
在 Sass 中，可以多个文件相互导入。例如，我们可以有一个 main.scss 文件，它导入了 base.scss 和 ui.scss，ui.scss 又导入了 theme.scss：
-- -------------------- ---- ------- -- --------- -------------- ---------- ------ ----------- ---- - ------------ -------------- - -- ------- ------ - -------- ----- - ------- -------- -- ---------- --------------- -------- ------ - ------ --------------- -
在上面的例子中，main.scss 引入了 base.scss 和 ui.scss。ui.scss 中又引入了 theme.scss。这种方式可以帮助我们将代码模块化、更加易于维护。
总结
通过使用 @import 指令，我们可以在 Sass 中轻松地导入其他 .scss、.sass 或 .css 样式表。同时，多重导入的方式可以帮助我们更好地组织代码、提高代码的复用性和维护性。
以上就是本文关于 Sass 中 @import 指令的详细介绍。希望对前端开发者们有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646da286968c7c53b0c4748a