前言
CSS 是一门在 web 前端开发过程中必不可少的语言，但是，CSS 也有它的缺点，比如一些全局 CSS 变量和复杂的继承关系，这使得在写 CSS 时，往往会重复地编写相似的代码，从而增加了代码的复杂性和维护成本。
为了解决这些问题，出现了一些 CSS 预处理器，比如 SASS (Syntactically Awesome Style Sheets)，它具备了很多有用的特性，例如变量、嵌套、条件语句等，这些都使得开发者能够更加高效地编写 CSS 代码。
在本文中，我们将介绍 SASS 中最重要的指令之一，@import 指令。通过灵活使用 @import 指令，我们可以更好地组织和管理 SASS 代码。
指令详解
@import 指令可以在 SASS 文件中导入其他 SASS 文件，并将其合并成为一个文件。这样可以将整个项目的样式代码分散到不同的文件中，从而使得样式代码更加易于管理和维护，并减少代码重复。
语法格式为：
@import "文件路径"
其中，文件路径可以是相对路径或者绝对路径。如果文件路径以 .scss 或者 .sass 结尾，则可以省略文件扩展名。
例如：
@import "base";
上述代码将会导入 base.scss 或者 base.sass 文件中的样式。
当 @import 导入一个 CSS 文件时，SASS 会将其编译成为一个单独的 CSS 文件，并将其包含进输出的 CSS 文件中。
例子
为了更好的帮助理解，下面我们通过一个例子来演示如何通过 @import 指令来组织 SASS 代码。
我们假设有一个网站包含多个页面，每个页面都需要一些公共的样式和一些独有的样式。为了更好地管理样式代码，我们可以将公共的样式放到一个 base.scss 文件中，页面独有的样式放到各自的文件中，并在页面的 SASS 文件中通过 @import 指令来导入 base.scss 文件中的样式。
我们先来看一下 base.scss 文件的内容：
-- -------------------- ---- ------- --------------- -------- ---- - ---------- ----- ------ --------------- - --- --- --- -- - ------------ ----- - ---- - -------- ---- ----- -------------- ---- -
上面的代码中定义了一些变量、通用样式和一些公共的样式类，例如 $primary-color 变量、body 元素的样式、标题元素的样式和一个 .btn 类。
下面我们来看一下如何在页面的 SASS 文件中导入 base.scss 文件：
-- -------------------- ---- -------
------- -------
------- -
----------------- --------
-- -
---------- -----
-
---- -
----------------- ---------------
------ --------
-
-上述代码中，我们通过 @import "base" 导入了 base.scss 中的样式，并在 .page-1 类中定义了一些页面独有的样式，比如背景色、标题元素的样式以及 .btn 类的一些样式细节。由于我们在 base.scss 和页面的 SASS 文件中都定义了 .btn 类，因此 SASS 会自动地将它们合并为一个样式类。
通过这种方式，我们就可以依据不同页面的需求来组织和管理样式代码，减少了代码重复，增强了代码的可维护性。
总结
通过本文的介绍，我们了解了如何使用 SASS 中的 @import 指令来组织和管理样式代码。我们可以将不同的样式代码分散到不同的文件中，并在需要的地方导入它们，增强代码的可维护性和可读性。希望大家可以掌握本文介绍的知识，在实践中更加灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469e426968c7c53b09ac6d3