css
有一個特別不常用的特性,即@import
規則,它允許在一個css
文件中導入其他css
文件。然而,后果是只有執行到@import
時,瀏覽器才會去下載其他css
文件,這導致頁面加載起來
特別慢。
scss
也有一個@import
規則,但不同的是,scss
的@import
規則在生成css
文件時就把相關文件導入進來。這意味着所有相關的樣式被歸納到了同一個css
文件中,而無需發起額外的下載
請求。另外,所有在被導入文件中定義的變量和混合器(參見2.5節)均可在導入文件中使用。
使用scss
的@import
規則並不需要指明被導入文件的全名。你可以省略.sass
或.scss
文件后綴(見下圖)。這樣,在不修改樣式表的前提下,你完全可以隨意修改你或別人寫的被導入的
scss
樣式文件語法,在sass
和scss
語法之間隨意切換。舉例來說,@import
"sidebar";這條命令將把sidebar.scss
文件中所有樣式添加到當前樣式表中。
一、使用SCSS部分文件
當通過@import
把scss
樣式分散到多個文件時,你通常只想生成少數幾個css
文件。那些專門為@import
命令而編寫的scss
文件,並不需要生成對應的獨立css
文件,這樣的scss
文件稱
為局部文件。對此,sass
有一個特殊的約定來命名這些文件。
此約定即,scss
局部文件的文件名以下划線開頭。這樣,scss
就不會在編譯時單獨編譯這個文件輸出css
,而只把這個文件用作導入。當你@import
一個局部文件時,還可以不寫文件
的全名,即省略文件名開頭的下划線。舉例來說,你想導入themes/_night-sky.scss
這個局部文件里的變量,你只需在樣式表中寫@import
"themes/night-sky";
。
局部文件可以被多個不同的文件引用。當一些樣式需要在多個頁面甚至多個項目中使用時,這非常有用。在這種情況下,有時需要在你的樣式表中對導入的樣式稍作修改,scss
有一
個功能剛好可以解決這個問題,即默認變量值。
二、默認變量值
一般情況下,你反復聲明一個變量,只有最后一處聲明有效且它會覆蓋前邊的值。舉例說明:
$link-color: blue; $link-color: red; a { color: $link-color; }
在上邊的例子中,超鏈接的color
會被設置為red
。這可能並不是你想要的結果,假如你寫了一個可被他人通過@import
導入的sass
庫文件,你可能希望導入者可以定制修改sass
庫文件
中的某些值。使用sass
的!default
標簽可以實現這個目的。它很像css
屬性中!important
標簽的對立面,不同的是!default
用於變量,含義是:如果這個變量被聲明賦值了,那就用它聲明
的值,否則就用這個默認值。
$fancybox-width: 400px !default; .fancybox { width: $fancybox-width; }
在上例中,如果用戶在導入你的sass
局部文件之前聲明了一個$fancybox-width
變量,那么你的局部文件中對$fancybox-width
賦值400px
的操作就無效。如果用戶沒有做這樣的聲明,
則$fancybox-width
將默認為400px
。
三、嵌套導入
跟原生的css
不同,scss
允許@import
命令寫在css
規則內。這種導入方式下,生成對應的css
文件時,局部文件會被直接插入到css
規則內導入它的地方。舉例說明,有一個名為_blue-
theme.scss
的局部文件,內容如下:
.aside { background: blue; color: white; }
然后把它導入到一個CSS規則內,如下所示:
.blue-theme {@import "blue-theme"} //生成的結果跟你直接在.blue-theme選擇器內寫_blue-theme.scss文件的內容完全一樣。 .blue-theme { .aside { background: blue; color: #fff; } }
被導入的局部文件中定義的所有變量和混合器,也會在這個規則范圍內生效。這些變量和混合器不會全局有效,這樣我們就可以通過嵌套導入只對站點中某一特定區域運用某種顏色
主題或其他通過變量配置的樣式。
有時,可用css
原生的@import
機制,在瀏覽器中下載必需的css
文件。scss
也提供了幾種方法來達成這種需求。
四、原生的CSS導入
由於scss
兼容原生的css
,所以它也支持原生的CSS@import
。盡管通常在scss
中使用@import
時,sass
會嘗試找到對應的scss
文件並導入進來,但在下列三種情況下會生成原生的
CSS@import
,盡管這會造成瀏覽器解析css
時的額外下載:
- 被導入文件的名字以
.css
結尾; - 被導入文件的名字是一個URL地址(比如http://www.sass.hk/css/css.css),由此可用谷歌字體API提供的相應服務;
- 被導入文件的名字是
CSS
的url()值。
這就是說,你不能用scss
的@import
直接導入一個原始的css
文件,因為scss
會認為你想用css
原生的@import
。但是,因為scss
的語法完全兼容css
,所以你可以把原始的css
文件改名
為.scss
后綴,即可直接導入了。