在前端开发中，CSS 的重要性不言而喻，相信大多数前端开发人员都对 CSS 有所了解。而 SASS 则是一门 CSS 预处理器，它可以帮助我们更方便、高效地编写 CSS。在 SASS 中，@import 是一种非常重要的指令，本文将详细介绍该指令及其应用。
@import 指令概述
SASS 中的 @import 指令用于导入其他 SASS 模块或文件。通常情况下，我们可以将一个大的 SASS 文件分成多个模块或文件，每个模块或文件只关注其中一部分样式。这样做的好处是可以提高代码的可维护性和可读性。
@import 指令的语法如下：
@import "filename";
其中 filename 可以是相对路径或绝对路径。如果文件名以 .scss 结尾，则可以省略扩展名。如果文件名包含多个单词，可以使用下划线代替空格，例如：
@import "base_variables"; // 导入 base_variables.scss
值得注意的是，@import 指令会将导入的文件合并到当前文件中，因此我们通常会将 @import 放在 SASS 文件的最上面。
@import 指令的应用
@import 指令可以用于以下几种情况：
导入基础变量
在 SASS 中，我们通常将颜色、字体大小等基础变量定义在一个单独的文件中，并在其他文件中导入。例如，我们可以定义一个 base_variables.scss 文件：
$primary-color: #007bff; $secondary-color: #6c757d; $font-size: 16px;
然后在其他 SASS 文件中导入该文件：
@import "base_variables";
这样，其他文件就可以使用 base_variables.scss 中定义的变量了。
导入 mixin
除了基础变量外，我们还可以将一些复杂的样式块定义为 mixin，并在其他文件中导入。例如，定义一个 mixin：
@mixin hover-effect {
transition: all .3s ease;
&:hover {
transform: translateY(-3px);
}
}然后在其他文件中导入该 mixin：
@import "mixin"; // 导入 mixin.scss 文件
.button {
@include hover-effect;
}这样，在 .button 中就可以使用 hover-effect mixin 中定义的样式了。
导入第三方库
我们也可以使用 @import 指令来导入第三方库，例如 Bootstrap：
@import "bootstrap/scss/bootstrap";
这样，我们就可以直接在 SASS 文件中使用 Bootstrap 中定义的样式了。
总结
本文介绍了 SASS 中的 @import 指令的语法、应用场景以及注意事项。通过合理使用 @import 指令，我们可以提高代码的可维护性和可读性，让项目更容易维护。
示例代码
下面是一个简单示例，假设我们有一个 SASS 文件夹，包含一个 main.scss 文件和一个 _base.scss 文件。
_base.scss 文件内容如下：
-- -------------------- ---- -------
--------------- --------
----------------- --------
------ ------------ -
----------- --- --- -----
------- -
---------- -----------------
-
-
main.scss 文件内容如下：
-- -------------------- ---- ------- ------- ------- ---- - ------------ ------ ----------- ---------- ----------- - -- - ------ --------------- - ------- - -------- ------------- ----------------- ----------------- ------ ----- -------------- ---- -------- ---- ----- ---------- ----------- -
编译后的 CSS 如下：
-- -------------------- ---- ------- ---- - ------------ ------ ----------- ---------- ----- - -- - ------ -------- - ------- - ----------- --- --- ----- ----------------- -------- ------ ----- -------------- ---- -------- ---- ----- ---------- ----- - ------------- - ---------- ----------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9a676f6b2d6eab34dc7d1