Sass

scss：與 Sass 之差異即是有中括號、分號（可以直接包含CSS）

常用 terminal 語法

// 編譯
sass style.sass style.css

// 存檔時即時編譯
sass --watch style.sass style.css

// 壓縮
sass --style=compressed style.sass style.css

常見用法

以 & 符號代替自己，常用於巢狀寫法

block
    color: red
    &__title
        font-size: 12px
    &__content
        font-size: 10px

模組化

命名慣例

要被引入的檔案，習慣於檔名前加底線
ex. _color.sass

import

引入後就可以使用外部檔案設定好的變數

@import 路徑（副檔名可加可不加）
@import style
@import style.sass

extend

多用為處理共同的樣式

// sass
%btn
    width: 20px
    heught: 10px

.btn
    &-submit
        @extend %btn
    &-delete
        @extend %btn

編譯後會變為：

.btn-submit, .btn-delete{
    width: 20px;
    height: 10px;
}

mixin

適合用來打包、引用，可帶入變數

@mixin btn
    width: 20px
    height: 10px

.btn
    &-submit
        +btn
    &-delete
        +btn

編譯後會變為：

.btn-submit{
    width: 20px;
    height: 10px;
}

.btn-delete{
    width: 20px;
    height: 10px;
}

mixin 帶入變數

@mixin btn-hover($color)
    &:hover
        color: $color

.btn
    &-submit
        +btn-hover($primary)
    &-delete
        +btn-hover($warning)

function

function 可回傳數值，可與 mixin 搭配使用

@function functionName()
    @return returnValue

注意事項

宣告需在使用前，才能被成功引用！

型態

List

可以理解為陣列，差別在於陣列 index 從 0 開始，而 List 則是從 1 開始

$color: red, blue, green

// 透過 nth() 使用 List
p
    color: nth($color, 2)

Map

可以理解為物件（Object），透過 map-get(變數, 鍵名) 取得資料

$color: (default: red, hover: blue, active: green)

a:hover  
    color: map-get($color, hover)

迴圈及條件運算

each 迴圈

對 List 使用

$direction-types: center, start, end

@each $type in $direction-types
    .flex-#{$type} // 字串加入變數 #{}
        display: $type
        justify-content: $type
        align-items: center

結果會得到

.flex-center {
  display: center;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: start;
  justify-content: start;
  align-items: center;
}

.flex-end {
  display: end;
  justify-content: end;
  align-items: center;
}

對 Map 使用

$direction-types: (center: center, start: flex-start, end: flex-end)

@each $type, $value in $direction-types
    .flex-#{$type} // 字串加入變數 #{}
        display: $type
        justify-content: $value
        align-items: center

結果會得到

.flex-center {
  display: center;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: start;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: end;
  justify-content: flex-end;
  align-items: center;
}

for 迴圈

適合用於設定一系列數字變化等狀況

@for $i from 0 through 5
    .h#{$i+1}
        font-size: 1 + 0.2rem * $i

得到結果

.h1 {
  font-size: 1rem;
}

.h2 {
  font-size: 1.2rem;
}

.h3 {
  font-size: 1.4rem;
}

.h4 {
  font-size: 1.6rem;
}

.h5 {
  font-size: 1.8rem;
}

.h6 {
  font-size: 2rem;
}

if else

比較運算子為 ==

@if 判斷式
    // 敘述
@else
    // 敘述

更多細節可以參考 Document 的 Flow Control

檔案拆分慣例

為了管理與維護的便利性，通常會把相同或重複使用的 CSS 拆成各個 sass 檔，引入主要 sass 檔中再編譯成最終的 CSS 檔。

常見的 sass 檔可能會包含：

• _components.sass
• _layouts.sass
• _mixins.sass
• _variables.sass

參考資料

• [FE201] 前端中階：那些前端會用到的工具們
• Sass 中的陣列（List）、物件（Map）