SASS 是一种 CSS 预处理器，它可以让前端开发者更加高效地编写 CSS，提供了诸多样式的嵌套方式、变量、混合等功能。在使用 SASS 进行开发的过程中，有时候需要引入已有的 CSS 文件。下面就来介绍一下 SASS 如何引入外部 CSS 文件。
方法一：使用 @import 指令
@import 指令可以引入外部的 SASS 或 CSS 文件，并且可以嵌套到 SASS 文件中。具体方法如下：
@import "path/to/file.css";
其中，"path/to/file.css" 是你要引入的 CSS 文件的路径。可以是相对于当前 SASS 文件的路径，也可以是绝对路径。
当 SASS 编译成 CSS 文件时，所有的引用 CSS 的代码都会被内联到编译生成的 CSS 文件中。
方法二：使用 link 标签
除了使用 @import 指令之外，还可以使用 HTML 的 link 标签来引入 CSS 文件。具体方法如下：
<link rel="stylesheet" href="path/to/file.css">
其中，"path/to/file.css" 是你要引入的 CSS 文件的路径。可以是相对于当前 HTML 文件的路径，也可以是绝对路径。
当使用 link 标签时，SASS 不会对 CSS 文件进行处理，而是直接将 CSS 文件添加到 HTML 文件中，因此不会出现缓存问题。
总结
上述两种方法都可以成功引入 CSS 文件，对于哪种方法的选择，主要要看具体的应用场景。如果是在 SASS 文件中使用，建议使用 @import 指令，因为它能够嵌套到 SASS 文件中，名称空间也更加完整；如果是在 HTML 文件中使用，建议使用 link 标签，在避免缓存问题的同时也能够更好地与 HTML 结构进行分离。
除此之外，还有一些高级用法，例如使用 SASS 的 partials 特性来拆分代码结构等，也对于项目开发有着重要的作用。因此，对于前端开发者来说，学习和掌握 SASS 的使用方法，是一项极其重要的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458717d968c7c53b0ad30c9