SASS @import 函式有什麼作用？

---

SASS 是一種 CSS 預處理器，它使 CSS 程式碼保持簡潔，因為它不允許程式碼重複。SASS 中有各種指令，其中之一是 @import 指令。

“@import”指令用於將一個“.scss”或“.sass”檔案的程式碼匯入另一個檔案，並在編譯期間執行它。我們可以使用“@import”指令將變數、函式、mixin 等從一個檔案匯入另一個檔案。

語法

使用者可以按照以下語法在 SASS 中使用“@import”指令匯入檔案。

@import 'test'

我們在上面的語法中匯入了“test.scss”或“test.sass”檔案。這裡，我們不需要在匯入程式碼時指定副檔名，因為編譯器會自動檢測它。

如果使用者想在一個檔案中匯入多個 CSS 檔案，則應使用以下語法。

@import 'file1', 'file2', 'file3', 'file4', ...

現在，讓我們透過示例瞭解如何使用 @import 指令匯入檔案。

示例 1

在下面的示例中，我們在“font.scss”檔案中添加了一些變數。之後，我們使用“@import”指令將“fonts.scss”檔案的內容匯入“styles.scss”檔案。

在“style.scss”檔案中，我們使用了“font.scss”檔案的變數。之後，我們編譯了“styles.scss”檔案的程式碼，使用者可以在輸出影像中看到“style.css”檔案的更新程式碼。

檔名 - Style.scss

@import "fonts";
$height: 5rem;
$border: 2px, solid, blue;
div {
   height: $height;
   border: $border;
   border-radius: 1rem;
}
h1 {
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   color: $heading-font-color;
   font-family: $heading-font-family;
}
p {
   font-size: $paragraph-font-size;
   font-weight: 200;
}

檔名 - Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-color: #000;
$heading-font-family: "Roboto", sans-serif;

輸出

示例 2

在下面的示例中，我們在“color.scss”檔案中添加了與顏色相關的變數，在“fonts.scss”檔案中添加了與字型相關的變數。在“style.scss”檔案中，我們使用“@import”指令一起匯入了“fonts.scss”和“colors.scss”檔案。

在“style.scss”檔案中，我們使用了顏色和字型的變數。在輸出中，使用者可以看到我們使用了變數的特定 CSS 屬性的值。

檔名 - Style.scss

@import "fonts", "colors";
div {
   color: $text-color;
   background-color: $background-color;
}
ul {
   li {
      color: $text-color;
      background-color: $background-color;
      font-size: $normal-font-size;
   }
}
h1 {
   color: $primary-color;
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   font-family: $heading-font-family;
}

檔名 - Colors.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

檔名 - Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-family: "Roboto", sans-serif;

輸出

使用 @import 指令的優點

使用“@import”指令有一些好處，我們在下面解釋。

• 我們可以將一個檔案的 CSS 程式碼匯入另一個檔案。

• 我們可以為程式碼的每個元件建立一個單獨的 CSS 檔案，並在需要時匯入它。

使用 @import 指令的缺點

使用“@import”指令有一些缺點，我們在下面解釋。

• 它使 CSS 檔案的所有內容（例如變數、函式、mixin 等）都可全域性訪問。因此，開發人員很難判斷特定變數是在哪裡定義的。

• 由於每個匯入檔案的所有內容都成為全域性的，因此每個檔案都應具有不同的變數名以避免衝突。

• SASS 編譯器會編譯每個 scss 檔案（無論是否匯入），這會增加編譯時間並降低程式碼效率。

SASS 中的部分檔案

為了解決上述缺點，我們可以使用 SASS 中的部分檔案。我們可以透過以下劃線開標頭檔案名來建立部分 scss 檔案。例如，“_test.scss”、“_colors.scss”等。

每當我們使用部分檔案時，SASS 轉換器都不會編譯部分檔案的程式碼，這會提高程式碼效率。但是，我們可以將部分 scss 檔案的內容匯入主 scss 檔案。

這是一個使用部分 scss 檔案的示例。

示例 3

在下面的示例中，我們建立了“_colors.scss”部分檔案，並將其匯入“style.scss”檔案。在這個示例中，由於我們使用了部分檔案，程式碼的編譯效率更高。

但是，無論我們是否使用部分檔案，程式碼輸出都保持不變。

檔名 - Style.scss

@import "colors";
img {
   width: 100%;
   height: 100%;
   background-color: $background-color;
}
p {
   color: $text-color;
}

檔名 - _Color.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

輸出

使用者學習瞭如何使用“@import”指令將一個檔案的程式碼匯入另一個檔案。這有助於我們將 SCSS 程式碼分解成更小的塊並避免重複。但是，使用 @import 指令有一些缺點，但我們可以使用部分檔案來解決這個問題。