Sass 語法規則

首先，sass和scss使用同一種語法，可是寫法有所不一樣。
sass在編寫的時候不適用' { '和' } '來包括，每一句的末尾也不能夠用' ; '來結束。
而scss則徹底能夠按照css的寫法編寫，本篇基本使用sass的寫法。

1 變量

1-1 變量聲明

在sass中可使用$來定義變量

//變量定義
$font-color: #333
$highlight-color: #F90

//變量引用
header 
  $width: 100px
  width: $width
  color: $font-color

在sass中，中劃線和下劃線均可以使用，如：

$link-color: blur
a
  color: $link_color

2 嵌套

2-1 基本嵌套

在sass中，須要在在父級中寫入不少子級的不一樣屬性，可使用嵌套。
嵌套在sass中顯示可能看不明白，本節附帶scss語句。

// sass 語句
.contanin
  article
    h1 color: #333
    p margin-bottom: 1.4rem
  aside
    background-color: #abc

// scss 語句
.contanin {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4rem }
  }
  aside {
    background-color: #abc
  }
}

// 編譯後
.contanin article h1 { color: #333 }
.contanin article p { margin-bottom: 1.4rem }
.contanin aside { background-color: #abc }

2-2 父選擇器的標識符：&

當想要經過嵌套給父級元素設置僞類事件時，若是咱們這樣寫：

// scss語句
article a {
  color: blue;
  :hover { color: red }
}

這樣的結果是給article中a連接的全部後代添加了hover事件，這確定不是咱們想要的結果；這時可使用 & 來獲取父級，如：

// scss語句
article a {
  color: blue;
  &:hover { color: red }
}

這樣就能夠實現給article中的a連接設置hover事件
還有一種狀況，須要給父選擇器以前添加選擇器時，能夠直接在 & 前面加上選擇器，如

// scss語句
#content aside {
  color: red;
  .main & { color: green }
}

// 編譯後
#content aside {color: red};
.main #content aside { color: green }

2-3 羣組選擇器的嵌套

// sass語句
.container 
  h1, h2, h3 
    margin-bottom: .8em

// 編譯後
.container h1, .container h2, .container h3 {
  margin-bottom: .8em 
}

2-4 多種選擇器：> 、+ 、~

> :子代選擇器，能夠選擇一個元素的子元素，而不是後代元素
+ :同層相鄰選擇器，能夠獲取一個元素後緊跟的一個元素
~ :同層全體組合選擇器，能夠獲取一個元素同層的全部所選元素

2-5 嵌套屬性

// sass語句
nav 
  border: 
  style: solid
  width: 1px
  color: #ccc

// 編譯後
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

感受並非很實用，像border,background,translate這些徹底能夠將全部屬性以此寫在後面。。

3 導入sass

在sass中能夠經過@import "reset"來導入reset.sass文件

3-1 用sass中的部分文件

在sass中有些sass文件你可能並不想將其轉化成css文件，只是爲了用於其餘地方導入，這時你就能夠經過在文件名的前面加一個下劃線_來標記。並且導入的時候能夠省略下劃線。
如：想導入_reset.sass文件時，能夠在想要導入的位置寫@import "reset";而且導入的文件種的變量均可以被使用。

3-2 默認變量值

一般在預設樣式中均可以使用!default來設置默認樣式，可是!default用於變量，含義：若是這個扁郎被聲明賦值了，那就用它聲明的值，不然就用這個默認值。

// sass語句
$color: #333 !default

3-3 嵌套導入

導入一個sass的局部文件，也能夠嵌套在一個選擇器中導入，如

// sass語句
.aside
  @import "reset"

這樣的導入，reset.sass中的變量的做用域就只有在.aside中才有效。

4 混合器mixin

4-1 混合器的定義與調用

混合器通俗來講就是將一大段樣式賦予一個名字，須要的時候只需調用這個名字便可（用於瀏覽器兼容處理上很方便）

// sass語句
// 定義
@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

4-2 混合器中的css規則

混合器中一樣能夠包含選擇器和選擇器中的屬性。
混合器中也可使用sass的父選擇器標識符&。
若是一個混合器只包含css規則，不包含屬性，那麼該混合器就能夠在文檔的頂部調用，用於全局。

4-3 混合器傳參

能夠看出，混合器和函數很像，須要定義，也能夠調用，如今又說能夠傳參！！

// sass語句
// 混合器定義
@mixin link-colors($normal, $hover, $visited) 
  color: $normal
  &:hover 
    color: $hover
  &:visited
    color: $visited

// 混合器調用
a 
  @include link-colors(blue, red, green)

// 編譯後
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

5 選擇器繼承

5-1 選擇器繼承

// sass語句
.error 
  border: 1px solid red
  background-color: #fdd

.seriousError 
  @extend .error
  border-width: 3px

這樣.seriousError就有了.error的全部屬性

5-2 組合選擇器的繼承

// sass語句

//應用到.seriousError a
.error a  
  color: red
  font-weight: 100

//應用到hl.seriousError
h1.error  
  font-size: 1.2rem

.seriousError 
  @extend .error
  border-width: 3px

.seriousError不只會繼承.error自身的全部樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承

6 註釋

在css中，咱們一般是用/ ... /來註釋，這樣的註釋被解析出來還會出如今css文件中。

在sass中，可使用 // 開頭的註釋來進行靜默註釋，這樣的註釋內容不會出如今生成的css文件中。