输入

Created: November-22, 2018

使用 @import 可以将文件拆分为多个较小的文件。这是有道理的，因为你可以为样式表保留更好的结构并避免非常大的文件。

例

假设你有一些文件。

- application.scss
- header.scss
- content
  |-- article.scss
  '-- list.scss
- footer.scss

你的主样式表 application.scss 可以导入所有文件以及定义自己的样式。

// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';

// other styles in application.scss
body {
  margin: 0;
}

请注意，你也可以省略 .scss 扩展，这样你就可以编写 @import 'header'; 而不是 @import 'header.scss'。

这导致 application.scss 将所有导入的 .scss 包含在你提供给客户端（浏览器）的编译文件中。在这种情况下，你编译的文件将是你在 html 中包含的 application.css。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
  </head>
  <body>
    ...
  </body>
</html>

虽然你正在处理多个文件，但你只需提供一个文件，因此无需多个请求（每个文件一个）并加快访问者的加载时间。

主要好处

使用文件夹和多个文件更好的开发结构
仅向客户端提供一个文件（浏览器）