3. 導(dǎo)入SASS文件

css有一個(gè)特別不常用的特性，即@import規(guī)則，它允許在一個(gè)css文件中導(dǎo)入其他css文件。然而，后果是只有執(zhí)行到@import時(shí)，瀏覽器才會(huì)去下載其他css文件，這導(dǎo)致頁(yè)面加載起來(lái)特別慢。

sass也有一個(gè)@import規(guī)則，但不同的是，sass的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來(lái)。這意味著所有相關(guān)的樣式被歸納到了同一個(gè)css文件中，而無(wú)需發(fā)起額外的下載請(qǐng)求。另外，所有在被導(dǎo)入文件中定義的變量和混合器(參見2.5節(jié))均可在導(dǎo)入文件中使用。

使用sass的@import規(guī)則并不需要指明被導(dǎo)入文件的全名。你可以省略.sass或.scss文件后綴(見下圖)。這樣，在不修改樣式表的前提下，你完全可以隨意修改你或別人寫的被導(dǎo)入的sass樣式文件語(yǔ)法，在sass和scss語(yǔ)法之間隨意切換。舉例來(lái)說(shuō)，@import"sidebar";這條命令將把sidebar.scss文件中所有樣式添加到當(dāng)前樣式表中。

本節(jié)將介紹如何使用sass的@import來(lái)處理多個(gè)sass文件。首先，我們將學(xué)習(xí)編寫那些被導(dǎo)入的sass文件，因?yàn)樵谝粋€(gè)大型sass項(xiàng)目中，這樣的文件是你最常編寫的那一類。接著，了解集中導(dǎo)入sass文件的方法，使你的樣式可重用性更高，包括聲明可自定義的變量值，以及在某一個(gè)選擇器范圍內(nèi)導(dǎo)入sass文件。最后，介紹如何在sass中使用css原生的@import命令。

通常，有些sass文件用于導(dǎo)入，你并不希望為每個(gè)這樣的文件單獨(dú)地生成一個(gè)css文件。對(duì)此，sass用一個(gè)特殊的約定來(lái)解決。