SASS是一種CSS預(yù)處理器，它通過不允許代碼中的重復(fù)來保持CSS代碼的干燥。在SASS中有各種指令可用，其中之一是@import指令。
‘@import’指令用于將一個(gè)‘.scss’或‘.sass’文件的代碼導(dǎo)入到另一個(gè)文件中，并在編譯期間執(zhí)行它。我們可以使用“@import”指令將變量、函數(shù)、mixin 等從一個(gè)文件導(dǎo)入到另一個(gè)文件。
語法
用戶可以按照以下語法在SASS中使用’@import’指令來導(dǎo)入文件。
@import 'test'
登錄后復(fù)制
我們在上述語法中導(dǎo)入了’test.scss’或’test.sass’文件。在這里，我們在導(dǎo)入代碼時(shí)不需要指定文件擴(kuò)展名，編譯器會(huì)自動(dòng)檢測。
如果用戶想要在單個(gè)文件中導(dǎo)入多個(gè) CSS 文件，則應(yīng)使用以下語法。
@import 'file1', 'file2', 'file3', 'file4', ...
登錄后復(fù)制
現(xiàn)在，讓我們通過示例了解如何使用 @import 指令導(dǎo)入文件。
Example 1
的中文翻譯為：
示例1
在下面的示例中，我們在“font.scss”文件中添加了一些變量。之后，我們使用“@import”指令將“fonts.scss”文件的內(nèi)容導(dǎo)入到“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;
}
登錄后復(fù)制
文件名 – 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;
登錄后復(fù)制
輸出
Example 2
的中文翻譯為：
示例2
在下面的示例中，我們將與顏色相關(guān)的變量添加到“color.scss”文件中，并將與字體相關(guān)的變量添加到“fonts.scss”文件中。在“style.scss”文件中，我們使用“@import”指令將“fonts.scss”和“colors.scss”文件一起導(dǎo)入。
在“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;
}
登錄后復(fù)制
文件名 – Colors.scss
$text-color: #000; $background-color: #fff; $primary-color: #000; $secondary-color: #fff; $tertiary-color: #000;
登錄后復(fù)制登錄后復(fù)制
文件名 – 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;
登錄后復(fù)制
輸出
使用@import指令的優(yōu)點(diǎn)
使用“@import”指令有一些好處，我們在下面進(jìn)行了解釋。
我們可以將一個(gè)文件的CSS代碼導(dǎo)入到另一個(gè)文件中。
我們可以為代碼的每個(gè)組件創(chuàng)建一個(gè)單獨(dú)的 CSS 文件，并在需要時(shí)導(dǎo)入它。
使用 @import 指令的缺點(diǎn)
使用’@import’指令存在一些缺點(diǎn)，我們在下面進(jìn)行了解釋。
它使得CSS文件中的所有內(nèi)容，如變量、函數(shù)、混合等，都可以全局訪問。因此，開發(fā)者很難確定特定變量的定義位置。
由于每個(gè)導(dǎo)入文件的所有內(nèi)容都變成了全局的，所以每個(gè)文件都應(yīng)該有不同的變量名來避免沖突。
SASS編譯器會(huì)編譯每個(gè)scss文件，無論是否導(dǎo)入，這會(huì)增加編譯時(shí)間并降低代碼效率。
在SASS中使用局部文件
為了解決上述缺點(diǎn)，我們可以使用SASS中的partials。我們可以通過在文件名前加下劃線來創(chuàng)建一個(gè)partial scss文件。例如，’_test.scss’，’_colors.scss’等。
每當(dāng)我們使用partials時(shí)，SASS轉(zhuǎn)譯器不會(huì)編譯partial文件的代碼，這樣可以提高代碼的效率。然而，我們可以將partial scss文件的內(nèi)容導(dǎo)入到主scss文件中。
這是使用部分 scss 文件的示例。
示例3
在下面的示例中，我們創(chuàng)建了‘_colors.scss’局部文件，并在‘style.scss’文件中導(dǎo)入它。在這個(gè)示例中，由于我們使用了局部文件，代碼的編譯變得更加高效。
但是，無論我們是否使用部分代碼，代碼輸出都保持不變。
文件名 – Style.scss
@import "colors";
img {
width: 100%;
height: 100%;
background-color: $background-color;
}
p {
color: $text-color;
}
登錄后復(fù)制
文件名 – _Color.scss
$text-color: #000; $background-color: #fff; $primary-color: #000; $secondary-color: #fff; $tertiary-color: #000;
登錄后復(fù)制登錄后復(fù)制
輸出
用戶學(xué)會(huì)了使用“@import”指令將一個(gè)文件的代碼導(dǎo)入到另一個(gè)文件中。它幫助我們將 SCSS 代碼分解成更小的塊并避免重復(fù)。然而，使用@import指令有一些缺點(diǎn)，但我們可以使用partials來解決這個(gè)問題。
以上就是SASS @import 函數(shù)有什么用？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
