Sass / Scss 教學 2

Sass 系列教學：

• Sass / Scss 教學 Part 1
• Sass / Scss 教學 Part 2

繼上篇基本的變數介紹之後，本篇來談談 Sass 中的巢狀(nested rules) 、命名空間(namespaces) 、引用(import) 等語法。

巢狀結構 (Nested Rules) #

假設在 HMTL 文件中有以下的結構：

<div id="main">
  <p>
    Look at
    <a class="red box" href="">this link</a>
  </p>
</div>

以往在撰寫 CSS 碼時，如果想針對結構內的階層關係進行設定時，就可能會空格分隔來表達，例如：

#main p {
  color: #777;
  width: 50%;
}

#main p .redbox {
  background-color: red;
  color: white;
}

如果 HTML 文件的階層結構簡單，那麼這種寫法其實沒有什麼問題；一旦階層結構複雜，那麼就可能出現很多 CSS 區塊都是針對某一個區塊內的元素而撰寫的設定，結果就會形成又臭又長的 CSS 碼。因此 Sass 也可以用巢狀的結構來表達 CSS 的階層關係，像上述的 CSS 範例，可以 Sass 寫成：

#main p {

  color: #777;
  width: 50%;

  .redbox {
    background-color: red;
    color: white;
  }

}

善用這樣的巢狀結構寫法，可以讓你的 Sass 更簡潔、更具閱讀性喔！

p.s. 官方建議，如果能夠使用簡單的結構語法，就不要使用太多巢狀結構，否則網頁載入速度會變慢，建議最多不要超過 3 層或 4 層

用 & 符號參照巢狀結構的父選取器 (Referencing Parent Selectors) #

CSS 中有定義一些 pseudo-classes (或稱偽類、準類別)，被使用來為元素增加一些特效，如 :hover , :link , :visited 等這些以冒號(:)開頭的類別名稱。例如把滑鼠移到某個網頁連結時，連結會變色的 CSS 語法：

a {
  font-weight: bold;
  text-decoration: none;
}

a :hover {
  color:#FF00FF;
}

上述其實還是一種巢狀的結構，只是都作用到同一個元素(例如範例的 a 元素)上。這樣的情況就能夠用對 :hover 使用 ＆ 符號來代表其作用的父選取器，所以上述的 CSS 範例的 Sass 就可以寫成：

a {

  font-weight: bold;
  text-decoration: none;

  &:hover {
    color:#FF00FF;
  }

}

更多關於 Parent Selectors

命名空間 (Namespaces) #

在 CSS 中，有定義很多屬性都是相同字串開頭 ，例如 font-family, font-size, font-weight 這些都是以 font 開頭，因此在 Sass 中就定義了命名空間的寫法，例如以下的 CSS 碼：

.serif-font {
  font-family: serif;
  font-size: 25em;
  font-weight: bold;
}

可以用 Sass 的命名空間表達成：

.serif-font {
  font: {
    family: serif;
    size: 25em;
    weight: bold;
  }
}

此外，命名空間也可以有自己的設定喔！例如，設定命名空間 font 的長寬為 2px / 3px ：

.serif-font {
  font: 2px / 3px {
    family: serif;
    size: 25em;
    weight: bold;
  }
}

上述範例會被編譯成：

.serif-font {
  font: 2px/3px;
  font-family: serif;
  font-size: 25em;
  font-weight: bold;
}

@import #

如果一個專案撰寫了很多個 scss / sass 檔案，就可以透過 @import 引用這些 scss/sass 檔案。 @import 對實務上有很大的幫助，因為可以把常用的、慣用的 CSS 碼放在不同的 scss/ sass 檔案內，達到模組化的功用！

語法：

@import "scss_file1", "scss_file2";

p.s. @import 不需加副檔名

p.s. 如果 scss/sass 檔名前加上底線(例如 _index.scss )，就代表這個檔案不需要 compile 成 CSS 檔案，且 @import 時檔名並不用加底線。

@extend #

繼承，這是我所能想到的最好的解釋了。以往如果有相同的 CSS 屬性，是無法用繼承的方式進行屬性的複製與改寫，得重新撰寫 CSS 碼才行。現在透過 Sass 的 @extend 就能夠進行屬性的繼承了！

語法：

@extend selector;

例如 Sass 官方提供的範例：

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

.seriousError 繼承了 .error 的樣式，所以會被編譯成：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

p.s. 每一個 Sass 區塊並沒有限定能夠使用 @extend 幾次，使用多重繼承也是可以的，只是要注意屬性覆蓋的問題，根據 CSS 的原則，前後屬性如相同，以最後出現的為準。

此外，在 Sass 中，有一種 extend only 的用法，如果在選取器(selector)名稱後加上 % 符號及名稱，就代表此一選取器只提供 @extend 繼承，且 % 符號及 % 後的名稱，會被繼承者的 # 或 . 符號所取代，而定義 extend only 的 Sass 區塊並不會被 Sass 編譯進 CSS 中。

例如：

a%ext-only {
  color: red;
}
.notice {
  @extend %ext-only;
}

就會被 Sass 編譯成：

a.notice {
  color: red;
}

以上的用法要注意，不可與定義 extend only 的 Sass 區塊內的元素衝突！例如把 .notice 改成 h1.notice 就會產生錯誤，因為原始可接受的定義是 extend-only-selector#id 或 extend-only-selector.class ，以上述範例來說就是 a#id , a.class 。

!optional #

在使用 @extend 時，後方的選取器(selector)必須實際存在或沒有任何錯誤存在，如果想 @extend 一個不存在的選取器或有錯誤暫時不想修正，可以在 @extend 最後面加上 !optional 標籤即可，例如前述的 extend only 的錯誤就可以用 !optional 來修正。

語法：

@extend selector !optional ;

關於 !optional Flag

@mixin #

@mixin 就像其字面意思一樣，可以用來混在 Sass 區塊中。因此它的作用其實很像函數，只要定義好 @mixin 之後，就可以不斷重複利用。

語法 1：

@mixin mixin-name { ... }

語法 2：

@mixin 可以像函數一樣使用參數。

@mixin mixin-name($arg1, $arg2, ...) { ... }

語法 3：

語法3的意義其實跟語法2一模一樣，只是語法 3 會更好閱讀跟理解參數的意思。

@mixin mixin-name($arg1: value1, $arg2: value2, ...) { ... }

以下是使用 @mixin 的範例：

@mixin clear-fix {
  display: inline-block;
}

@include #

定義好 @mixin 之後，要使用 @mixin 的方法就是使用 @include 。

語法 1：

@include mixin-name;

語法 2：

@include mixin-nam(arg1, arg2, ...);

例如調用先前定義好的 mixin clear-fix ：

p {
  @include clear-fix;
}

更多 @include

@content #

@content 也經常與 @mixin 一起使用，因為 @content 的作用是能夠讓 @mixin 傳入一整個 CSS 區塊的用法。

範例 1：

@mixin colors {
  width: 1000px;
  @content;
}

.title {
  @inclue colors { background-color: blue; }
}

範例1的寫法其實，就是將 { background-color: blue; } 一整個區塊傳進 @mixin colors 的 @content 內。其結果就像以下的 CSS 碼：

.title {
  width: 1000px;
  background-color: blue;
}

@content 的用法雖然便利，不過也要注意區域變數的問題，例如以下的範例 2，我們可能會誤以為 @include colors { color: $color; } 傳入的 $color 是 blue ，但事實上此 $color 與 @mixin colors($color: blue) 的 $color 不同， @include colors { color: $color; } 的 $color 取決於位於 .title 內的區域變數或全域變數。

範例 2：

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
}

.title {
width: 1000px;
  @include colors { color: $color; }
}

範例 2 的結果如下：

.title {
  width: 1000px;
  background-color: blue;
  color: white;
}

@function #

@function 用法幾乎與 @mixin 相同，不過它多了 @return 可以使用回傳值！

語法：

@function func($arg1, $arg2, ...) {
  @return $variable ;
}

範例：

@function double($n) {
  @return $n * 2;
}

$width: 20;
.cell-width {
  width: double($width);
}

上述範例會被編譯成：

.cell-width {
  width: 40;
}

@if #

@if 判斷式，請直接看範例！

範例：

$type: ie;
p {
    @if $type == ie { color: blue; }
    @elif $type == chrome { color: green; }
    @else { color: black; }
}

@for #

這也沒什麼好說明的，可以直接看範例。

語法：

@for $i from $number1 through $number2 {
    ...
}

範例：

@for $variable from 1 through 3 {
  .item-#{$1} { width: 100px * $i; }
}

範例結果：

.item-1 { width: 100px; }
.item-2 { width: 200px; }
.item-3 { width: 300px; }

@each #

語法：

@each $variable in <list>
  ...
}

範例：

@each $variable in 1, 2, 3 {
    .item-#{$variable} { width: 100px * $variable; }
}

範例結果：

.item-1 {
  width: 100px;
}

.item-2 {
  width: 200px;
}

.item-3 {
  width: 300px;
}

@while #

直接看範例：

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

範例結果：

.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

@debug & @warn #

Sass 也提供一些 Debug 的技巧，例如 @debug , @warn ，兩者的用法相同，可以在開發過程善用它，以減少除錯的次數。例如可以在 Sass 檔內添加一行：

@debug 10em + 12em;

在編譯時就會跳出以下的訊息提示：

Line 1 DEBUG: 22em

以上是簡單的 Sass 語法介紹，有興趣者也可以至 Sass