【筆記】Sass 使用簡介與常用語法


Posted by Jianna on 2021-12-12

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

參考資料


#css #SASS







Related Posts

javascript 值的變數、型別、函數

javascript 值的變數、型別、函數

5. 實際開發 ToDo List 案例

5. 實際開發 ToDo List 案例

波士頓房價預測模型

波士頓房價預測模型


Comments