css @import和SASS / SCSS @import有什么区别？

Question

原始css具有@import关键字，可以包含外部css文件。

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

Answer 1

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

假设我们在本机CSS中编写了以下代码：

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

结果，您获得了一个文件，即下载其他文件。这些请求将单独发送到您的服务器，您将收到3个文件作为响应。只需查看开发人员控制台即可发现此问题。

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

Answer 2

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

Answer 3

来自the docs：

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

但是，现在不建议在Sass中使用@import。建议使用@use。

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