前言
在过去的几年中，前端网页开发的速度越来越快，这样就需要更高效和快速地制造网站。对于对前端网页开发有所了解的人来说，你一定听说过 SASS。SASS 是一种预处理器，数字都是 SASS 的一部分。
在传统 CSS 编程中，如果您的项目包含许多 CSS 文件，则需要将所有这些文件逐个引入 HTML。这增加了 HTML 的复杂性和文件大小。SASS 中，我们使用 @import 语法来包含所有的样式表并将其编译为单个 CSS 文件，以便加快网站的加载速度。
下面，我们将详细介绍 SASS 中如何使用 @import 语法来精简代码。
如何使用 @import 语法
在 SASS 中，使用 @import 语法非常简单。只需将 @import 语句放在样式表的顶部即可。
-- -------------------- ---- -------
-- ---------------
--------------- --------
----------------- --------
-- ----------
------- ------------
------- -
----------------- ---------------
-通过这个例子，我们可以看到在 index.scss 文件中使用 @import 'variables'; 引用了 _variables.scss 文件里面定义的变量。这就是 @import 的用法，不需要重复的定义一些样式变量，可以有效的精简代码。
SASS 中 @import 更多的使用方式
@import 后者优先（SASS 中的跟普通 CSS 中正常的行为相反）
在 SASS 中，@import 后者优先，这意味着，如果您有两个文件，其中一个文件中使用了相同的变量名，则导入后一个文件会覆盖前一个文件中的变量值。
假设有这样的结构：
-- -------------------- ---- -------
-- ---------
----- -
------ -----
-
-- ----------
----- -
------ ----
-
-- ----------
------- -------
------- --------
-------- -
------- ------
-在这个例子中，.content 定义使用 .text 的颜色值。 我们先引入了 base.scss 文件，然后引入了 base2.scss 文件。由于后者优先的规则， .text 样式会被重写为红色。
当引入的文件名是一个文件夹时
假如在一个文件夹下我们定义了一个 _base.scss 文件，现在我们有一个写了模块化的 button 样式表，而这个样式表需要把定义的 button 样式导进来，这个时候我们就需要增加一个文件夹，如下：
假设有这样的结构：
-- -------------------- ---- -------
-- ---------------
-- ------------
------- -
-------- -----
-
-- ----------
------- ------------
------- --------------------在加载的时候，SASS 会寻找所需文件夹下名字相同的 .scss 或 .sass 文件。在这个例子中，SASS 会寻找 components/button.scss 或 components/_button.scss。
另外，如果导入的是一个文件夹，而不是一个特定文件，例如：
@import 'components';
则 SASS 会自动尝试加载该文件夹下的 _components.scss 文件。
总结
@import 语句在 SASS 中非常有用，可以有效地精简代码。无需编写重复的代码，通过引用其他文件中的样式。
同时，我们在 SASS 中使用 @import 时还需要注意些细节，例如 @import 后者优先的规则，当引入的文件名是一个文件夹时等等。
我们希望本文能够给大家提供一些关于 SASS 和 @import 的知识，用来提高前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d54e3968c7c53b0825994