如下圖所示：quick order 資料夾下存在一個 _index.scss 檔案，其匯入了 styles 資料夾下的 index：

![](https://img-blog.csdnimg.cn/img_convert/6ca5b3da7bb77f075a6ae59889d2cfe4.png)

然而，styles 資料夾下並沒有 index.scss 檔案，只有一個 _index.scss. 但是，ctrl + click 點選上圖第一行程式碼後，會自動跳轉到 styles 資料夾下的 _index.scss 檔案：

![](https://img-blog.csdnimg.cn/img_convert/ca9bf182f922f442449e9d827947a224.png)

檢視這個 @import 的[語法](https://sass-lang.com/documentation/at-rules/import)：

Sass 擴充套件了 CSS 的 @import 規則，能夠匯入 Sass 和 CSS 樣式表，提供對 mixin、函式和變數的訪問，並將多個樣式表的 CSS 組合在一起。 與需要瀏覽器在呈現頁面時發出多個 HTTP 請求的普通 CSS 匯入不同，Sass 匯入完全在編譯期間處理。

Sass 匯入的語法與 CSS 匯入相同，只是它們允許多個匯入用逗號分隔，而不是要求每個匯入都有自己的 @import。 此外，在縮排語法中，匯入的 URL 不需要引號。

考慮下列兩個檔案：

```scss
// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
```

```scss
// foundation/_lists.scss
ul, ol {
  text-align: left;

& & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}
```

在我的 style.scss 檔案裡如何匯入二者？

```scss
@import 'foundation/code', 'foundation/lists';
```

注意語法，slash 後面，下劃線和副檔名 .scss 自動消失。

當 Sass 匯入一個檔案時，該檔案被評估，就好像它的內容直接出現在 @import 的位置。 匯入檔案中的任何混入、函式和變數都可用，並且其所有 CSS 都包含在編寫 @import 的確切位置。 更重要的是，在@import 之前定義的任何mixin、函式或變數（包括來自其他@imports）都可以在匯入的樣式表中使用。

注意，需要小心重複匯入問題：

如果多次匯入相同的樣式表，則每次都會重新評估。 如果它只是定義了函式和 mixin，這通常沒什麼大不了的，但是如果它包含樣式規則，它們將被多次編譯為 CSS。

# 被匯入 scss 檔案的定位問題

為了確保樣式表適用於每個作業系統，Sass 透過 URL 而不是檔案路徑匯入檔案。 這意味著您需要使用正斜槓，而不是反斜槓，即使您使用的是 Windows。

注意：如下圖所示：Windows10 使用的是反斜槓：

![](https://img-blog.csdnimg.cn/img_convert/5057c664e7226819ccb6727f9965aecd.png)

# Load paths

所有 Sass 實現都允許使用者提供載入路徑：Sass 在解析匯入時將查詢的檔案系統上的路徑。 例如，如果你透過 node_modules/susy/sass 作為載入路徑，你可以使用@import "susy" 來載入 node_modules/susy/sass/susy.scss。

但是，匯入將始終首先相對於當前檔案進行解析。 僅當不存在與匯入匹配的相關檔案時才會使用載入路徑。這可確保您在新增新庫時不會意外弄亂相對匯入。

與其他一些語言不同，Sass 不要求您使用 ./ 進行相對匯入。相對匯入始終可用。

# Partials

按照慣例，僅用於匯入而非自行編譯的 Sass 檔案以 _ 開頭（如在 _code.scss 中）。 這些被稱為部分，它們告訴 Sass 工具不要嘗試自己編譯這些檔案。 您可以在匯入部分時省略 _。

如果您在資料夾中寫入 _index.scss 或 _index.sass，則在匯入資料夾本身時，該檔案將被載入到其位置。

下列是一個例子：

_code.scss 和 _lists.scss 被同一資料夾下的 _index.scss 匯入：

![](https://img-blog.csdnimg.cn/img_convert/fa70536bc2aab270e0c8f7bf8d25ca9d.png)

匯入時不需要使用相對路徑，或者補全副檔名 .scss.

最後生成的 css：
![](https://img-blog.csdnimg.cn/img_convert/f8b3aa5bfdabe531d6679708bc74090f.png)

關於 SAP Spartacus feature library 裡的 _index.scss 檔案

相關文章