SASS 是一种 CSS 预处理器，它提供了许多便捷的语法和功能，以帮助前端开发者更快捷、高效地编写 CSS。在 SASS 中，我们可以使用 @import 指令来引入其他 SASS 文件，但是如果我们想要引入一个已经存在的 CSS 文件，该怎么办呢？
本文将会详细介绍如何在 SASS 中引用外部 CSS 文件，并提供示例代码和指导意义，希望能够帮助读者更好地理解和掌握这一技能。
1. 使用 @import 指令
在 SASS 中，我们可以使用 @import 指令来引入其他 SASS 文件，这个指令也可以用来引入 CSS 文件。例如，我们有一个名为 style.css 的 CSS 文件，我们可以在 SASS 文件中使用以下代码来引入它：
@import 'style.css';
这样，SASS 就会将 style.css 文件中的样式导入到当前的 SASS 文件中。需要注意的是，这种方式并不会将 style.css 文件编译成 SASS，而是直接将其包含在编译后的 CSS 文件中。
2. 使用 @import 指令和 url() 函数
如果我们想要将 CSS 文件编译成 SASS，可以使用 url() 函数来实现。具体来说，我们可以使用以下代码来引入 style.css 文件：
@import url('style.css');
这样，SASS 就会将 style.css 文件编译成 SASS，并将其导入到当前的 SASS 文件中。需要注意的是，这种方式需要保证 style.css 文件中的所有样式都能够被成功编译成 SASS。
3. 使用 @import 指令和 sass-convert 工具
如果我们想要将 CSS 文件转换成 SASS 文件，并且保留原有的样式和结构，可以使用 sass-convert 工具来实现。具体来说，我们可以使用以下命令将 style.css 文件转换成 style.scss 文件：
sass-convert style.css style.scss
然后，在 SASS 文件中使用以下代码来引入 style.scss 文件：
@import 'style.scss';
这样，SASS 就会将 style.scss 文件导入到当前的 SASS 文件中，并且保留原有的样式和结构。需要注意的是，这种方式需要保证 sass-convert 工具已经正确安装，并且 style.css 文件中的所有样式都能够被成功转换成 SASS。
4. 总结
在 SASS 中引用外部 CSS 文件有多种方式，我们可以根据实际需要选择适合自己的方法。需要注意的是，无论选择哪种方式，都需要保证 CSS 文件中的所有样式都能够被成功导入到 SASS 文件中，并且不会对编译后的 CSS 文件产生任何影响。
示例代码：
// 使用 @import 指令引入 CSS 文件 @import 'style.css'; // 使用 @import 指令和 url() 函数引入 CSS 文件 @import url('style.css'); // 使用 @import 指令和 sass-convert 工具引入 CSS 文件 @import 'style.scss';
指导意义：
- 在 SASS 中引用外部 CSS 文件可以提高代码的复用性和可维护性。
- 在选择引入方式时需要根据实际需要进行选择，并且保证 CSS 文件中的所有样式都能够被成功导入到 SASS 文件中。
- 在引入 CSS 文件时需要注意不要对编译后的 CSS 文件产生任何影响。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66062a10d10417a222427622
