Sass學習筆記(一)
1 使用變量
$nav-color: #F90; nav { $width: 100px; width: $width; color: $nav-color; } //編譯後 nav { width: 100px; color: #F90; }
1-2 變量引用
$highlight-color: #F90; .selected { border: 1px solid $highlight-color; } //編譯後 .selected { border: 1px solid #F90; }
$highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected{ border: $highlight-border; } //編譯後 .selected { border: 1px solid #F90; }
1-3 變量名中劃線和下劃線的使用
取決於個人喜好
2 嵌套CSS規則
如: #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE } sass: #content { article { h1 { color: #333 } p{ margin-bottom: 1.4em } } aside { background-color: #EEE } }
2-1 hover
錯誤寫法: article a { color: blue; :hover { color: red } } 正確寫法: article a { color: blue; &:hover { color: red } }
2-2 群組選擇器的嵌套
如: .container h1, .container h2, .container h3 { margin-bottom: .8em } 處理方式為: .container{ h1, h2, h3 {margin-bottom: .8em} } 又如: nav, aside { a {color: blue} }
2-3 子組合選擇器和同層選擇器:> + ~
如: article ~ article { border-top: 1px dashed #ccc } article > footer { background: #eee } article dl > dt { color: #333 } article dl > dd { color: #555 } nav + article { margin-top: 0 } 處理方式為: article { ~ article { border-top: 1px dashed #ccc } > section { background: #eee } dl > { dt { color: #333 } dd { color: #555 } } nav + & { margin-top: 0 } }
2-4 嵌套屬性
如: nav { border-style: solid; border-width: 1px; border-color: #ccc; } 處理為: nav { border: { style: solid; width: 1px; color: #ccc; } } 又如: nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; } 處理為: nav { border: 1px solid #ccc { left: 0px; right: 0px; } }
3 導入SASS文件
css
有一個特別不常用的特性,即@import
規則,它允許在一個css
文件中導入其他css
文件。然而,後果是只有執行到@import
時,瀏覽器才會去下載其他css
文件,這導致頁面加載起來特別慢。
sass
也有一個@import
規則,但不同的是,sass
的@import
規則在生成css
文件時就把相關文件導入進來。這意味著所有相關的樣式被歸納到了同一個css
文件中,而無需發起額外的下載請求。另外,所有在被導入文件中定義的變量和混合器(參見2.5節)均可在導入文件中使用。
使用sass
的@import
規則並不需要指明被導入文件的全名。你可以省略.sass
或.scss
文件後綴(見下圖)。這樣,在不修改樣式表的前提下,你完全可以隨意修改你或別人寫的被導入的sass
樣式文件語法,在sass
和scss
語法之間隨意切換。舉例來說,@import
"sidebar";這條命令將把sidebar.scss
文件中所有樣式添加到當前樣式表中。
3-1 使用SASS部分文件
當通過@import
把sass
樣式分散到多個文件時,你通常只想生成少數幾個css
文件。那些專門為@import
命令而編寫的sass
文件,並不需要生成對應的獨立css
文件,這樣的sass
文件稱為局部文件。對此,sass
有一個特殊的約定來命名這些文件。
此約定即,sass
局部文件的文件名以下劃線開頭。這樣,sass
就不會在編譯時單獨編譯這個文件輸出css
,而只把這個文件用作導入。當你@import
一個局部文件時,還可以不寫文件的全名,即省略文件名開頭的下劃線。舉例來說,你想導入themes/_night-sky.scss
這個局部文件裏的變量,你只需在樣式表中寫@import
"themes/night-sky";
。
局部文件可以被多個不同的文件引用。當一些樣式需要在多個頁面甚至多個項目中使用時,這非常有用。在這種情況下,有時需要在你的樣式表中對導入的樣式稍作修改,sass
有一個功能剛好可以解決這個問題,即默認變量值。
3-2 默認變量值
一般,重復聲明變量會被覆蓋,如: $link-color: blue; $link-color: red; a { color: $link-color; } 特別是你的sass文件庫在他人import時,他人可能想修改某些值的情況下,sass提供類似!import標簽的對立面,即:如果這個變量被重新聲明賦值了,那就用它的聲明的值,否則就用這個默認值。 處理為: $fancybox-width: 400px !default; .fancybox { width: $fancybox-width; } 在上例中,如果用戶在導入你的sass局部文件之前聲明了一個$fancybox-width變量,那麽你的局部文件中對$fancybox-width賦值400px的操作就無效。如果用戶沒有做這樣的聲明,則$fancybox-width將默認為400px。
3-3 嵌套導入
如,一個名為_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; } } 被導入的局部文件中定義的所有變量和混合器,也會在這個規則範圍內生效。 好處:這些變量和混合器不會全局有效,這樣我們就可以通過嵌套導入只對站點中某一特定區域運用某種顏色主題或其他通過變量配置的樣式。
3-4 原生CSS導入
由於sass
兼容原生的css
,所以它也支持原生的CSS@import
。盡管通常在sass
中使用@import
時,sass
會嘗試找到對應的sass
文件並導入進來,但在下列三種情況下會生成原生的CSS@import
,盡管這會造成瀏覽器解析css
時的額外下載:
- 被導入文件的名字以
.css
結尾; - 被導入文件的名字是一個URL地址(比如http://www.sass.hk/css/css.css),由此可用谷歌字體API提供的相應服務;
- 被導入文件的名字是
CSS
的url()值。
這就是說,你不能用sass
的@import
直接導入一個原始的css
文件,因為sass
會認為你想用css
原生的@import
。但是,因為sass
的語法完全兼容css
,所以你可以把原始的css
文件改名為.scss
後綴,即可直接導入了。
文件導入是保證sass
的代碼可維護性和可讀性的重要一環。次之但亦非常重要的就是註釋了。註釋可以幫助樣式作者記錄寫sass
的過程中的想法。在原生的css
中,註釋對於其他人是直接可見的,但sass
提供了一種方式可在生成的css
文件中按需抹掉相應的註釋。
4 靜默註釋
body { color: #333; // 這種註釋內容不會出現在生成的css文件中 padding: 0; /* 這種註釋內容會出現在生成的css文件中 */ } body { color /* 這塊註釋內容不會出現在生成的css中 */: #333; padding: 1; /* 這塊註釋內容也不會出現在生成的css中 */ 0; }
5 混合器
混合器使用@mixin標識符定義。 先寫一個混合器: @mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } 通過@include來使用這個混合器 notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; } //sass最終生成: .notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
5-1 何時使用混合器
利用混合器,可以很容易地在樣式表的不同地方共享樣式。如果你發現自己在不停地重復一段樣式,那就應該把這段樣式構造成優良的混合器,尤其是這段樣式本身就是一個邏輯單元,比如說是一組放在一起有意義的屬性。
判斷一組屬性是否應該組合成一個混合器,一條經驗法則就是你能否為這個混合器想出一個好的名字。如果你能找到一個很好的短名字來描述這些屬性修飾的樣式,比如rounded-corners
fancy-font
或者no-bullets
,那麽往往能夠構造一個合適的混合器。如果你找不到,這時候構造一個混合器可能並不合適。
混合器在某些方面跟css
類很像。都是讓你給一大段樣式命名,所以在選擇使用哪個的時候可能會產生疑惑。最重要的區別就是類名是在html
文件中應用的,而混合器是在樣式表中應用的。這就意味著類名具有語義化含義,而不僅僅是一種展示性的描述:用來描述html
元素的含義而不是html
元素的外觀。而另一方面,混合器是展示性的描述,用來描述一條css
規則應用之後會產生怎樣的效果。
在之前的例子中,.notice
是一個有語義的類名。如果一個html
元素有一個notice
的類名,就表明了這個html
元素的用途:向用戶展示提醒信息。rounded-corners
混合器是展示性的,它描述了包含它的css
規則最終的視覺樣式,尤其是邊框角的視覺樣式。混合器和類配合使用寫出整潔的html
和css
,因為使用語義化的類名亦可以幫你避免重復使用混合器。為了保持你的html
和css
的易讀性和可維護性,在寫樣式的過程中一定要銘記二者的區別。
有時候僅僅把屬性放在混合器中還遠遠不夠,可喜的是,sass
同樣允許你把css
規則放在混合器中。
5-2 混合器中的CSS規則
如下一個包含css規則的名為no-bullets的混合器: @mixin no-bullets { list-style: none; li { list-style-image: none; list-style-type: none; margin-left: 0px; } } 使用: ul.plain { color: #444; @include no-bullets; } 等價於: ul.plain { color: #444; list-style: none; } ul.plain li { list-style-image: none; list-style-type: none; margin-left: 0px; }
5-3 給混合器傳參
// 如: @mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } } // 使用: a { @include link-colors(blue, red, green); } // Sass最終生成的是: a { color: blue; } a:hover { color: red; } a:visited { color: green; }
當你@include混合器時,有時候可能會很難區分每個參數是什麽意思,參數之間是一個什麽樣的順序。為了解決這個問題,sass
允許通過語法$name: value
的形式指定每個參數的值。這種形式的傳參,參數順序就不必再在乎了,只需要保證沒有漏掉參數即可:
a { @include link-colors( $normal: blue, $visited: green, $hover: red ); }
5-4 默認參數值
為了在@include
混合器時不必傳入所有的參數,我們可以給參數指定一個默認值。參數默認值使用$name: default-value
的聲明形式,默認值可以是任何有效的css
屬性值,甚至是其他參數的引用,如下代碼:
@mixin link-colors( $normal, $hover: $normal, $visited: $normal ) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }
如果像下邊這樣調用:@include link-colors(red)
$hover
和$visited
也會被自動賦值為red
。
6 使用選擇器繼承來精簡CSS
選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend
語法實現,如下代碼:
//通過選擇器繼承繼承樣式 .error { border: 1px solid red; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }
.seriousError
不僅會繼承.error
自身的所有樣式,任何跟.error
有關的組合選擇器樣式也會被.seriousError
以組合選擇器的形式繼承,如下代碼:
//.seriousError從.error繼承樣式 .error a{ //應用到.seriousError a color: red; font-weight: 100; } h1.error { //應用到hl.seriousError font-size: 1.2rem; }
Sass學習筆記(一)