在前端开发中，我们经常需要引入外部的 CSS 样式文件，以便在项目中使用。而在 SASS 中，我们可以使用 @import 来引入 CSS 样式文件，使得我们的样式表更加模块化和可维护。
@import 的基本语法
@import 是 SASS 中用来引入外部样式表的语法，其基本语法如下：
@import '路径/文件名';
其中，路径可以是相对路径或绝对路径，文件名可以是 SCSS 或者 CSS 格式的样式表文件。
需要注意的是，在引入 CSS 样式表文件时，我们需要使用 .css 扩展名，例如：
@import '路径/文件名.css';
@import 的特性
使用 @import 引入样式表文件有以下特性：
文件合并
当 SASS 编译器编译样式表文件时，会将 @import 引入的样式表文件合并到当前文件中，生成一个单独的 CSS 文件。这样，我们就可以将多个样式表文件合并成一个文件，减少 HTTP 请求次数，提高网页性能。
嵌套引入
在 SASS 中，我们可以在样式表文件中使用 @import 引入其他样式表文件，而这些被引入的样式表文件中也可以再次使用 @import 引入其他样式表文件，从而形成一个嵌套的引入关系。
这种嵌套的引入方式可以让我们更加清晰地组织样式表文件，使得整个样式表文件更加易于维护。
变量共享
当我们在一个样式表文件中定义了变量，而在另一个样式表文件中使用 @import 引入了这个样式表文件时，这些变量也可以在引入文件中使用。这样，我们就可以在不同的样式表文件中共享变量，提高代码的复用性。
示例代码
下面是一个使用 @import 引入样式表文件的示例代码：
// javascriptcn.com 代码示例
// 定义变量
$primary-color: #007bff;
// 引入 reset 样式表
@import 'reset.css';
// 引入 base 样式表
@import 'base.scss';
// 定义样式
body {
background-color: $primary-color;
}在上面的代码中，我们首先定义了一个变量 $primary-color，然后使用 @import 引入了 reset.css 和 base.scss 两个样式表文件，最后定义了一个样式，将背景色设置为 $primary-color 变量的值。
总结
通过使用 @import 引入样式表文件，我们可以使得样式表更加模块化和可维护，提高代码的复用性和可读性。同时，我们还可以将多个样式表文件合并成一个文件，减少 HTTP 请求次数，提高网页性能。因此，在开发中，我们应该充分利用 @import 这个特性，来优化我们的样式表文件。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6574336cd2f5e1655dd77fed