變量聲明
•你可以把反覆使用的css屬性值 定義成變量，使用$符號來標識，賦予其一個易懂的變量名然後通過變量名來引用它們。
$highlight-color: #F90;
•sass變量的聲明和css屬性的聲明很像，任何css屬性值都可以用作sass的變量值。
•與css屬性不同，sass變量可以在{}規則塊外定義，若定義在了{ }塊內就只能在塊內使用。
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
變量引用
•凡是css屬性的標準值(比如說1px或者bold)可存在的地方,變量就可以使用。
•改變這個變量的值,則所有引用此變量的地方生成的值都會隨之改變。
•聲明變量時,變量值也可以引用其他變量。
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected{
border: $highlight-border;
}
//編譯後
.selected {
border: 1px solid #F90;
}
變量命名
•sass的變量名可以與css中的屬性名和選擇器名稱相同,包括中劃線和下劃線。中劃線更普遍。
•用中劃線聲明的變量可以使用下劃線的方式引用,反之亦然。
$link-color: blue;
a {
color: $link_color;
}
//編譯後
a {
color: blue;
}
嵌套規則
•css中重複寫選擇器是非常惱人的。如一遍又一遍地寫同一個ID:
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em}
#content aside { background-color: #EEE }
•當你同時要爲一個容器元素及其子元素編寫特定樣式時，可以使用父元素規則塊包括屬性和子元素規則塊的方式：
#content {
background-color: #f5f5f5;
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
//編譯後 #content article h1 { color: #333 }，sass把父選擇器放到子選擇器前面。
選擇器的標識符&
•與元素同級選擇器樣式用&父選擇器標識符
article a {
color: blue;
&:hover {
color: red
}
}
&被父選擇器直接替換:
article a { color: blue }
article a:hover { color: red }
羣組選擇器的嵌套
•css的寫法會讓你在羣組選擇器中的每一個選擇器前都重複一遍容器元素的選擇器。
.container h1, .container h2, .container h3 { margin-bottom: .8em }
•Sass使用內嵌羣組選擇器：
.container {
h1, h2, h3 {margin-bottom: .8em}
}
減少重複敲寫，大大減少工作量。
子組合選擇器和同層組合選擇器(> 、+、 ~)
•可以把它們放在外層選擇器後邊,或裏層選擇器前邊:
article {
~ article {
border-top: 1px dashed #ccc
}
> section {
background:#eee
}
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
屬性嵌套
•在sass中,除了CSS選擇器,屬性也可以進行嵌套。
•避免反覆寫border-style，border-width，border-color使用：
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
•利用嵌套，指出例外規則：
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
導入sass文件
•sass的@import導入其他css文件時，規則是在生成css文件時就把相關文件導入進來，所有相關的樣式被歸納到了同一個css文件中。
•@import 文件名，可以省略.sass或.scss文件後綴
•跟原生的css不同,sass允許@import命令寫在css規則內。
.blue-theme {@import "blue-theme"}
•因爲sass的語法完全兼容css,所以你可以把原生的css文件改名爲.scss後綴,即可直接導入。
靜默註釋
•在原生的css中,註釋對於其他人是直接可見的,但sass提供了一種方式可在生成的css文件中按需抹掉相應的註釋。
•它們以//開頭,註釋內容直到行末。
body {
color: #333; // 這種註釋內容不會出現在生成的css文件中
padding: 0; /*這種註釋內容會出現在生成的css文件中 */
}
混合器
•使用混合器抽象你的相關樣式。
•整個網站中有幾處小小的樣式類似(例如一致的顏色和字體)，那麼使用變量來統一處理這種情況是非常不錯的選擇。
•你需要大段大段的重用樣式的代碼,獨立的變量就沒辦法應付這種情況了。你可以通過sass的混合器實現大段樣式的重用。
•混合器使用@mixin標識符定義。給一大段樣式賦予一個名字。
•通過引用這個名字重用這段樣式。
定義：跨瀏覽器的圓角邊框。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
重用：
Notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners
}
混合器傳參
•混合器並不一定總得生成相同的樣式。可以通過在@include混合器時給混合器傳參,來定製混合器生成的精確樣式。參數其實就是可以賦值給css屬性值的變量。
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover {
color: $hover;
}
&:visited {
color: $visited;
}
}
•被include時：像函數傳參一樣來傳值。
a {
@include link-colors(blue, red, green); // ($normal: blue, $visited: green, $hover: red)
}
混合器-默認參數值
•參數默認值使用$name: default-value的聲明形式。
@mixin link-colors( $normal, $hover: $normal, $visited: $normal ){
color: $normal;
&:hover {
color: $hover;
}
&:visited {
color: $visited;
}
}
•如果像下邊這樣調用:@include link-colors(red) $hover和$visited也會被自動賦值。
選擇器繼承
•選擇器繼承是說一個選擇器可以繼承爲另一個選擇器定義的所有樣式。這個通過@extend語法實現。
.error {
border: 1px solid red; background-color: #fdd;
}
.seriousError {
@extend .error; //通過選擇器繼承繼承樣式，使兩者之間的關係非常清晰
border-width: 3px;
}
•seriousError將會繼承樣式表中任何位置處爲.error定義的所有樣式。最終的展示效果就好像是class=“seriousError error”。
•任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承。
//.seriousError從.error繼承樣式
.error a{ //應用到.seriousError a
color: red;
font-weight: 100;
}
•@extend背後最基本的想法是,如果.seriousError @extend .error, 那麼樣式表中的任何一處.error都用.error.seriousError這一選擇器組進行替換。
•因爲繼承只會在生成css時複製選擇器,而不會複製大段的css屬性。所以使用繼承比使用混合器生成的css體積更小。
•繼承遵從css層疊的規則。
使用繼承的最佳實踐：
•但是如果你不小心,可能會讓生成的css中包含大量的選擇器複製。
•最好方法就是不要在css規則中使用後代選擇器(比如.foo .bar)去繼承css規則。如果你這麼做了：
.foo .bar { @extend .baz; }
.bip .baz { a: b; }
•sass必須生成三種選擇器組合(僅僅是.bip .foo .bar不能覆蓋所有情況)，生成css中的選擇器的數量很快就會失控。所以儘可能避免用後代選擇器去繼承。