CSS @import 和 SASS/SCSS @import 有什么区别？答案

【问题标题】：What is the difference between CSS @import and SASS/SCSS @import?CSS @import 和 SASS/SCSS @import 有什么区别？
【发布时间】：2017-04-20 00:01:05
【问题描述】：

原始 CSS 有 @import 关键字，这有助于我们包含外部 CSS 文件。

那么，这个@import 和来自 SASS/SCSS 的有什么区别？

【问题讨论】：

它们从根本上做相同的概念性事情，但是 SASS 由 SASS 编译器进行预处理，并且该编译器对该指令执行任何操作，而浏览器在遇到 .css 中的指令时执行任何操作文件。不确定您希望我们在这里介绍多少细节……
烦人的是你不能在SCSS中@import一个css文件编译。 SASS 假定它是您想要的 CSS 导入，因此它保留在生成的代码中。
似乎是fixed at least in libsass（还有一些 ruby 编译器？）

标签： css sass

【解决方案1】：

CSS 中的@import： CSS 有一个导入选项，可让您将 CSS 拆分为更小、更易于维护的部分。

然而，

@import in SASS/SCSS： Sass 构建在当前 CSS @import 之上，但不需要 HTTP 请求，Sass 将获取您要导入的文件并将其与您要导入的文件，以便您可以将单个 CSS 文件提供给 Web 浏览器。

例如：

在_reset.scss

中

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

在 base.scss

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

参考：SASS Guide

【讨论】：

这是否意味着编译后的css文件会在同一个文件中显示reset.scss内容和base.scss内容，reset.scss内容最先出现？

【解决方案2】：

css @import 发生在运行时，Sass @import 发生在构建时。

【讨论】：

【解决方案3】：

我建议尽可能使用 Sass 导入。

假设我们有以下用原生 CSS 编写的代码：

@import "style1.css";
@import "style2.css";
@import "style3.css";

因此，您得到一个文件，它正在下载另一个文件。这些请求分别发送到您的服务器，您会收到 3 个文件作为响应。只需查看开发者控制台即可发现此问题。

在 Sass 中，文件被连接到一个文件（通过您使用的前端工作流程），这只是对您的服务器的一个请求。

【讨论】：

【解决方案4】：

来自the docs：

Sass 扩展了 CSS 的 @import 规则，能够导入 Sass 和 CSS 样式表，提供对混合、函数和变量的访问，并将多个样式表的 CSS 组合在一起。

但是，现在 Sass 不鼓励使用 @import，建议改用 @use。

这应该可以减少 css 和 scss @import 语句之间的混淆。

【讨论】：