六角學院 Sass 課程學習筆記（更新中）

發表於 更新於 分類於 Disqus：

本文為觀看六角學院「 Sass 實戰全攻略 - 成為前 1% 的 CSS 頂尖好手」的紀錄。

簡介

什麼是 Sass

Sass（Syntactically Awesome Stylesheets）是一種 CSS 語言。 SassScript 是一個在 Sass 檔案中使用的小型 Scripting Language。

Sass包括兩套語法：

  • .sass：用縮排來區分 block
  • .scss：用大括號區分 block

以下面的 CSS 來說：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.square {
  margin: 30px auto;
  background-color: blue;
  width: 300px;
  height: 300px;
}
.square .circle {
  margin: auto;
  background-color: red;
  width: 200px;
  height: 200px;
  border-radius: 300%;
}
.square .circle .line {
  margin: auto;
  background-color: yellow;
  width: 10px;
  height: 300px;
}

寫成 SCSS 會是像這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.square{
    margin: 30px auto;
    background-color: blue;
    width: 300px;
    height: 300px;
    .circle{
        margin: auto;
        background-color: red;
        width: 200px;
        height: 200px;
        border-radius: 300%;
        .line{
            margin: auto;
            background-color: yellow;
            width: 10px;
            height: 300px;
        }
    }
}

寫成 SASS 則是這樣：
（沒有大括號也沒有分號、冒號後面一定要有空白鍵。）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.square
    margin: 30px auto
    background-color: blue
    width: 300px
    height: 300px
    .circle
        margin: auto
        background-color: red
        width: 200px
        height: 200px
        border-radius: 300%
        .line
            margin: auto
            background-color: yellow
            width: 10px
            height: 300px

Sass 直譯器會把 SassScript 直譯為 CSS 檔案，也可以針對 .sass 或 .scss 檔案的改動及時更新 CSS 檔案。

Sass 的官方直譯器是開源的並且用 Ruby 寫成，但是也有用 PHP 、 C 語言、 Java 等實作的版本（ C 語言為 llibSass ， Java 版本為 JSass ）。

Sass 包含以下功能：

  • Variables
    • 變數以 $ 為開頭，以 : 賦值
    • 型別
      • 數值（可包含單位）
      • 字串
      • 顏色
      • 布林值
  • Nesting
  • Mixins
    • 類似 function
    • 迴圈
  • Selector inheritance

安裝編譯器

可以到 Sass 官網 找到編譯器的應用程式，例如 Prepos 。
或是使用編輯器的擴充套件，例如 VS Code 的 Live Sass Compiler 。

基礎語法

Parent Selector

SCSS 中可以用 & 選擇父元素，將 :hover 、 ::before 等寫在 block 中。

See the Pen SCSS Parent selector by Lynn (@clhuang224) on CodePen.

Variable

變數以 $ 開頭，可以賦予數值、字串、顏色、布林值及空值，也可以計算。
使用變數可以提高可讀性，易於大幅修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$font-size-large: 24px;
$font-size-middle: $font-size-large * 0.8;
$max-width: 1000px;
$square-color: #0f0;
$circle-color: #f00;
.square{
    margin: auto;
    background-color: $square-color;
    font-size: $font-size-large;
    .circle{
        background-color: $circle-color;
        font-size: $font-size-middle;
        width: $max-width / 2;
        height: 50px;
    }
}

命名方式可以參考 twbs/bootstrap/scss/_variables.scss 。
配色觀念可以參考：

Build-in Modules

Sass 有一些內建的模組，例如：

  • sass:color
    • darken()
    • lighten()
  • sass:math
    • math.round()

@import

待續