0%

[SASS] SASS 基礎概念 1

發表於 更新於 分類於 Disqus：

什麼是 SASS？ 不是 SARS 哦
來聊聊它的基本觀念。

什麼是 SASS？

SASS 是一種針對 CSS 的腳本程式語言，藉由提供程式語言的特性，例如變數、巢狀結構、混合、函式與擴充（繼承）等等，可以預先對 CSS 進行結構化的工作，最後再編譯可使用於網頁上的 CSS 語法。需要搭配 SASS 解譯器 (如 prepros) 進行撰寫。

SASS 包括兩套語法。最開始的語法叫做「縮排語法」，使用縮排來區分程式碼塊，並且用換行將不同規則分隔開，附檔名為 .sass。而較新的語法叫做「SCSS」，使用和 CSS 一樣的塊語法，即使用大括號將不同的規則分開，使用分號將具體的樣式分開。

以下以 SCSS 語法為主，整理 SASS 的應用方法。

寫法：減少重工，不必重複寫同樣的選取器。

子元素的樣式直接寫在父元素裡即可。

變數：便於管理，快速管理出同樣設定的樣式

在最前面設一個變數名，例如 linkcolor ，名稱前加一個 $ 字號，並寫上該變數代表的值。例：

1
$linkcolor: #000;

所有要做相同管理的屬性後面，都接上變數名。例：

1
2
3
4
5
6
7
8
9
.header a {
  color: $linkcolor
}
.content a {
  color: $linkcolor
}
.footer a {
  color: $linkcolor
}

以後若要全部替代成別的值，就在 $linkcolor (變數名) 後面作值的修改即可。

那麼，哪些項目適合用變數做全域設定？

字型大小這種常常需要統一規格的項目就很適合。例：

1
2
3
font-m: 16px;
font-l: font-m * 1.2 // 支援加減乘除
font-s: font-m * 0.8

拆檔：@import 讓每支 .scss 檔各司其職

  1. 一支 .scss 檔案只單獨處理一件事，例如 reset 寫在一個 .scss 檔，檔名命名為 _reset.scss；首頁樣式寫在另一個檔，檔名命名為 _index.scss。前面加底線很重要，代表那是合併用的 sass 檔，理論上並不會編譯出對應的 .css 檔。
  2. 在名為 all 的 .scss 檔裡做統整，用 @import「依序」匯入個別的 .scss 檔。網頁中只會引入 all.scss 編譯出來的 all.css。