續上一篇 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; }