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 函數有什么用？的詳細內容，更多請關注www.92cms.cn其它相關文章！
