linkSASS

參考資料：Sass Basics

SASS 是一種程式語言，把 SASS 檔案拿去編譯就會產生出 CSS 檔案。

link寫法 Syntax

SASS 有以下兩種寫法

1. SASS：副檔名是 .sass，用縮排區分階層，設定值後面不能有分號。

2. SCSS：副檔名是 .scss，用 {} 大括號區分階層，設定值後面必須有 ; 分號。

舉例如下：

1linkh1

2link    font-size: 24px

1linkh1 {

2link    font-size: 24px;

3link}

以上兩個範例編譯後產生的 CSS 是相同的

link編譯 Preprocessing

編譯 SASS 檔案的工具有以下幾種：

• 專門編譯 SASS 的軟體，例如 prepros
• 前端任務 / 打包工具，例如 gulp, webpack
• 程式碼編輯器的延伸模組，例如 Live Sass Compiler
• 命令提示字元，安裝方法：官方網站說明

link註解 Comments

註解有兩種：

1link/* 這一行文字 會 出現在編譯後產生的 CSS 檔案中 */

2link// 這一行文字 不會 出現在編譯後產生的 CSS 檔案中

link階層 Nesting

在編譯之後下層選取器的前方會有上層的選擇器，可應用在撰寫多個選取器的設定。

舉例如下：

1link.menu {

2link    padding: 12px;

3link    a {

4link        font-weight: 300;

5link    }

6link}

1link.menu {

2link    padding: 12px;

3link}

4link.menu a {

5link    font-weight: 300;

6link}

link上層選擇器 Parent Selector

在編譯之後 & 符號的位置會換成上層的選擇器，可應用在撰寫偽類與偽元素的設定。

舉例如下：

1linka {

2link    color: red;

3link    &:hover {

4link        color: blue;

5link    }

6link}

1linka {

2link    color: red;

3link}

4linka:hover {

5link    color: blue;

6link}