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

3 回答

• 3

  CSS中的@import：CSS有一个导入选项，可以将CSS拆分为更小，更易维护的部分 .

  然而，

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

  For Example:

  在 _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

  回复于 2024-04-28T04:48:45+08:00
• 0

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

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

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

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

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

  回复于 2024-04-28T04:48:45+08:00
• 3

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

  回复于 2024-04-28T04:48:45+08:00