在前端开发中，引入 CSS 文件是非常基础的操作。通常我们会使用 <link> 标签在 HTML 中引入 CSS 文件，但在 SASS 中也可以使用 @import 来进行 CSS 文件的引入。在这篇文章中，我们将深入研究这两种方式的区别和使用场景。
引入方式的区别
<link> 标签
<link> 标签是在 HTML 文档中引入外部文件的标准方式之一。例如：
<link rel="stylesheet" href="styles.css">
上面的代码表示在 HTML 文件中引入一个名为 styles.css 的 CSS 文件。<link> 标签使用 rel 属性指定文件类型，href 属性指定文件路径，可以引入 css、js、favicon 等各种类型的文件。
@import
在 SASS 中，也可以使用 @import 来引入 CSS 文件。例如：
@import "styles.css";
该语句表示在当前 SASS 文件中引入名为 styles.css 的 CSS 文件。@import 的方式与 <link> 不同的是，它直接将传递的文件内容嵌入到当前文件中，因此在编译后，只会生成一个 CSS 文件。
使用场景的区别
<link> 标签
<link> 标签在 HTML 文件中使用比较广泛。主要优点如下：
- 结构清晰：在 HTML 代码中，
<link>标签只需被放置在文档的<head>部分。这样可使文档的结构更加清晰，易于维护和更新。 - 使用灵活：可以根据需要引入任意数量的样式表，并可以针对特定的文档使用。
- 浏览器缓存：由于使用
<link>标签引入的 CSS 文件会被浏览器缓存，因此可以提高网站的加载速度。
@import
@import 在 SASS 中使用较为方便。主要优点如下：
- 简化 CSS 文件数量：使用
@import可以将多个 CSS 文件合并成一个，并且可以根据需要组织文件结构。这使得维护和更新 CSS 代码时更加方便。 - 条件编译：
@import可以根据需要选择不同的 CSS 文件进行引入，这对于实现条件编译非常有用。 - 变量和 mixin 共享：在 SASS 中，
@import可以共享变量、mixin 和函数等，从而减少了代码的冗余。
示例代码
下面是一些示例代码，展示了 <link> 标签和 @import 的使用方式。
<link> 标签
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ----- ---------------- ------------------ ------- ------ ---------- ----------- ------- -------展开代码
@import
-- -------------------- ---- ------- -- ----------- ----- ----- --- -- - ------- -- -------- -- - -- ----------- ------- -------- ---------- - ---------- ------ ------- - ----- -展开代码
结论
<link> 标签和 @import 在 CSS 文件引入方面都是非常常见的方式。使用 <link> 标签适用于在 HTML 中引入外部样式表，使代码结构更加清晰。使用 @import 可以根据需要组织 CSS 结构，并可以在 SASS 中实现条件编译和变量、mixin 共享等高级功能。在实际使用中，应根据具体情况选择合适的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6080cc5c563ced57ed0eb
