Sass 語法規則

ugdth發表於2017-12-16

首先，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檔案中。

相關文章