安裝
文檔
官網:https://www.sass.hk/guide/
使用
- 定義變量,使用$定義變量,如果在花括號內定義的變量只能在其內部或子級使用
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
- 變量中中劃線與下劃線是相同的
$link-color: blue;
a {
color: $link_color;
}
//編譯後
a {
color: blue;
}
- 嵌套CSS 規則
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
- 父選擇器的標識符&;
article a {
color: blue;
&:hover { color: red }
}
- 羣組選擇器的嵌套;
.container {
h1, h2, h3 {margin-bottom: .8em}
}
- 子組合選擇器和同層組合選擇器:>、+和~;
這些組合選擇器可以毫不費力地應用到sass的規則嵌套中。可以把它們放在外層選擇器後邊,或裏層選擇器前邊:
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
sass會如你所願地將這些嵌套規則一一解開組合在一起:
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 }
- 嵌套屬性;
對於屬性的縮寫形式,你甚至可以像下邊這樣來嵌套,指明例外規則:
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
這比下邊這種同等樣式的寫法要好:
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
導入SASS文件;
css有一個特別不常用的特性,即@import規則,它允許在一個css文件中導入其他css文件。然而,後果是隻有執行到@import時,瀏覽器纔會去下載其他css文件,這導致頁面加載起來特別慢。
sass也有一個@import規則,但不同的是,sass的@import規則在生成css文件時就把相關文件導入進來。這意味着所有相關的樣式被歸納到了同一個css文件中,而無需發起額外的下載請求