上一篇 Sass 進階應用,這篇列表 Sass 內建函數,及自定義函數的用法。


# 內建函數

# lighten & darken

  • 基本語法

    :lighten( color, 50%)
    :darken( color, 50%)
    
  • 範例

    $color-main: #00F;
    $color-main-light30: lighten($color-main, 30%);
    $color-main-dark30: darken($color-main, 30%);
    a{
        background-color: $color-main;
        &:hover{
            color: $color-main-light30;
        }
        &:active{
            color: $color-main-dark30;
        }
    }
    


# 補充:關於hsl & hsla

一般網頁色瑪用 RGB(#00FF00)來定義,六個數字兩兩一組各代表紅色、綠色、藍色的色值,而色值是16進位制表示0~255之間(00 = 0,FF = 255)

  • hsla:

    • 色相(Hue): 0~360
    • 飽和度(Saturation): 0 ~ 100%
    • 亮度(Lightness): 0 ~ 100%
    • 透明度(alpha): 0 ~ 1
  • 基本語法

    hsl(0, 100%, 50%)
    hsla(0, 100%, 50%, 0.5 )
    
  • 範例

    span{
        color: hsl(20, 100%, 50%);
        background-color: hsla(20, 100%, 50%, 0.5);
    }
    


# 顏色函數

function do eg
adjust-hue(color, __deg) 調整顏色的色相(hsl中的h) ($main-color, 137deg)
saturate(color, __%) 增加顏色的飽和度(hsl中的S) ($main-color, 50%)
desaturate(color, __%) 減少顏色的飽和度(hsl中的S) ($main-color, 50%)
transparentize(color, 0.3) 顏色變得更透明
(減少alpha值)
($main-color, 0.3)
原本alpha-0.3
opacify(color, 0._) 顏色變得更不透明
(增加alpha值)
($main-color, 0.3%)
原本alpha+0.3
lighten(color, __%) 增加顏色亮度(明度) ($main-color, 30%)
darken(color, __%) 減少顏色亮度(明度) ($main-color, 30%)

# 數字函數

function do eg
abs() 絕對值 (-5)→5
round() 取整數-四捨五入 (-3.6)→4
(-3.1)→3
ceil() 取整數-無條件進位 (-3.6)→4
(-3.1)→4
floor() 取整數-無條件捨去 (-3.6)→3
(-3.1)→3
percemtage() 計算比例 (10px / 100px) → 10%
min() 取最小值 (1, 2, 3) → 1
max() 取最大值 (1, 2, 3) → 3

# 文字函數

function do eg
to-upper-case() 字串轉大寫 (Hello)→HELLO
to-lower-case() 四捨五入取整數 (Hello)→hello
str-length() 回傳字串長度 (Hello)→5
str-index(string, keyword)
(index從1開始)
查特定自在字串中的位置 ("Hello Eudora", "Hello")→1
str-insert(string, addString, index) 字串中插入值 ("Hello", " Eudora", 5)→"Hello Eudora"

# 自定義函數

  • 語法
    @function name(argument1, argument2...){
        ...
        @return ...
    }
    
  • 例:搭配 map 應用
    $theme: (
        light: #ccc,
        dark: #222
    );
    @function theme($mode) {
        @return map-get($theme, $mode);
    }
    body {
        background-color: theme(dark);
    }
    
    compiled:
    body {
        background-color: #222;
    }
    

參考資料