輸入

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>

雖然你正在處理多個檔案，但你只需提供一個檔案，因此無需多個請求（每個檔案一個）並加快訪問者的載入時間。

主要好處

使用資料夾和多個檔案更好的開發結構
僅向客戶端提供一個檔案（瀏覽器）