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 指令匯入檔案。

Example 1

範例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;

輸出

Example 2

範例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檔案中的所有內容，如變數、函數、混合等，都可以全域存取。因此，開發者很難確定特定變數的定義位置。

• 由於每個匯入檔案的所有內容都變成了全域的，所以每個檔案都應該有不同的變數名稱來避免衝突。

• SASS編譯器會編譯每個scss文件，無論是否導入，這會增加編譯時間並降低程式碼效率。

在SASS中使用局部檔案

為了解決上述缺點，我們可以使用SASS中的partials。我們可以透過在檔案名稱前加底線來建立一個partial scss檔。例如，'_test.scss'，'_colors.scss'等。

每當我們使用partials時，SASS轉譯器不會編譯partial檔案的程式碼，這樣可以提高程式碼的效率。然而，我們可以將partial 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指令有一些缺點，但我們可以使用partials來解決這個問題。

以上是SASS @import 函數有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！