Sass 學習筆記

1. 什麼是Sass

css預處理器，幫助你書寫更簡單、可維持的css。

---

2. Sass的特徵

• 變量（variable）幫助你存儲須要重複使用的值；

• 嵌套（nesting）讓你書寫更少的選擇器；

• partials(_base.scss) 和@import讓你的CSS更加模塊化，而且編譯爲一個css文件，減小http請求；

• Mixin 讓你建立一組可重複使用的CSS聲明，每次使用只須要@inclue，而且可使用變量自定義值；

• Extend共享一組css規則，使css更簡潔；

• 運算符：方便運算

---

3. Sass語法

3.1. 嵌套規則

---

• 普通嵌套

應用場景：避免重複書寫父元素，讓複雜嵌套書寫更簡單

• &指代父元素

應用場景： 父元素有其餘用法
好比僞類；在其餘元素有class時給父元素樣式

• 命名空間：

應用場景： 減小background, font這種複合元素分開寫的重複

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

===============普通嵌套======================

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
    &-sidebar { border: 1px solid; }
}

===========&指代父元素==========================

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }
a-sidebar { border: 1px solid; }

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

============命名空間==========================

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

3.2 註釋

---

• /* */爲多行註釋;//單行註釋。多行註釋在輸出時會保留，單行註釋不會。

• 多行註釋以!開頭，即便在壓縮模式下也會被保留。有利於版權等關鍵信息的保留。

3.3 SassScript

---

• 變量

應用場景： 屢次使用某個值
以$開頭，在某個嵌套內部聲明的變量只能在該內部使用，以外的變量則爲全局變量。變量後加上!global則變爲全局變量。

• 數據類型
  1.數字、字符串（有無「」）、顏色、布爾值、null、list（用空格或都好隔開）， map(鍵值對)

2.#{}內的字符串解析時會去掉引號；
3.nth(list/map, index)獲取第幾項，從1開始；
4.join(list1, list2, seperator)：合併爲一個新的list
5.append(list1, list2, seperator)：返回新的list

• 運算符
  1./：在做爲變量、函數、不是list的括號內、與其餘運算符一塊兒時進行除法運算，其他狀況做爲普通的css.

2.-：做爲減法，儘可能兩邊有空格，負號運算符在前面有空格，做爲list最好用括號包圍。
3.顏色運算符：分段運算(# 01|02|03)， 對於透明度，有opacity(color, alpha), transparentize(color, alpha)。
4.字符串運算符：根據左邊的字符判斷最終結構是否有引號。
5.布爾運算符（and, or, not）
6.list不支持運算符，請使用函數

• 變量默認值!default：當變量未被賦值時，使用!default的值,!default的值不能重定義；

3.4 @-rules 和指令

---

1. @import: 引入其餘文件。而且會將引入的文件也編譯到最後的文件中。import文件中的變量,mixin也可在主文件中使用。

應用場景：樣式的模塊化；減小Link請求數量

=== example.sass ====
.example {
  color: red;
}    

=== main.sass === 
#main {
  @import "example";
}

==== compiled to ====
#main .example {
  color: red;
}

- 引入多個文件
`@import ‘base’, ‘test’`

1. @media

應用場景：媒體查詢時不用重複寫選擇器

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
=== Compiled to  === 
.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

==== Compiled to ===
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
=== Compiled to ===
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

在不一樣的選擇器中寫同一套媒體查詢怎麼解決？
何時用#{}, 何時用變量？

1. @extend

應用場景：一個類須要另外一個類的所有css樣式時。好比bootstrap中的btn, btn-success。若使用html，則兩個類必須同時使用，增長維護負擔。

1. @at-root：讓嵌套裏的元素，使用在文件最外層。打破嵌套規則。@at-root(with/widthout)讓元素在指令以外。

2. 調試：

   • @debug: 輸出sassScript結果；

   • @warning: 控制用戶輸入變量等，可用—quiet關掉

   • @error 輸出錯誤

3.5 條件控制

---

1. if(boolean, trueValue, falseValue):

2. @if：條件知足時使用樣式，好比導航active就colour：green；

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

1. @for $i from start to/through end:through包括end, to不包括，$i可在循環中使用。

2. @each in list/map

3. @mixin一組重用的css, 使用@include引入，可攜帶參數。

   • @include裏的內容會應用在mixing中的@content的位置。

   • @content中的變量只在@content的中塊中使用，不然解析爲全局變量

3.6 函數

---

1. function

@function name (param) {
     @retutn
}

3.7 產出css

---

1. —nested: 產出嵌套的css;

2. —expanded:常寫的css， 無嵌套;

3. —compat:一個選擇器一行；

4. —compressed:全部的都寫在一行；