Sass - 前端工程師應該要會的工程化 CSS - 計算功能與顏色、list、map 的輔助函式

CSS
,

這次要來介紹的是 Sass 的一些輔助函式及功能，”你不一定要用~但用了一定幫助你更多”的概念 XD

blog image

計算功能

Sass 既然是工程化的語法~自然可以做數值計算啦!搭配變數的設定，可以讓整體數值的變化更有統一性，除了基本的加減乘除外，取餘數也是可以的喔!最扯的是連顏色都可以計算 XD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$base:10px;
.box{
  width: 500px;
  padding: $base*2 + 5px;
  margin-bottom: $base*3 - 5px;
  font-size: $base*2;
  letter-spacing: $base % 7;
  background-color: #333 + rgb(33,250,158);
}

// 轉成 CSS
.box {
  width: 500px;
  padding: 25px;
  margin-bottom: 25px;
  font-size: 20px;
  letter-spacing: 3px;
  background-color: #54ffd1;
}

一般計算過程要注意單位是否正確，px 就對 px，em 就對 em，不同單位的計算會有問題。不過顏色的單位好像例外…以上例的 hex 跟 rgb 就可以混用，但如果是 hex 跟 rgba 就會報錯(多了透明度的計算)。如果要處理透明度的計算，兩者之間的透明度值一定要相等否則一樣會報錯喔!
經測試下來，不含透明度的顏色計算輸出會是 hex 的格式，含透明度的顏色計算輸出則是 rgba。

1
2
3
4
5
6
7
8
9
10
11
12
13
.box{
  background-color: rgba(55,78,30,0.5)+ rgba(200,30,67,0.5);
  // OK! background-color: rgba(255, 108, 97, 0.5);

  background-color: rgba(55,78,30,0.5)+ rgba(200,30,67,0.2);
  // 不OK! Alpha channels must be equal: rgba(55, 78, 30, 0.5) + rgba(200, 30, 67, 0.2)

  background-color: rgba(55,78,30,0.5)+ hsla(20,70%,50%,0.5);
  // OK! background-color: rgba(255, 176, 68, 0.5);

  background-color: rgba(55,78,30,0.5)+ hsla(20,70%,50%,0.2);
  // 不OK! Alpha channels must be equal: rgba(55, 78, 30, 0.5) + rgba(217, 98, 38, 0.2)
}

random($limit)

產生隨機數值的方法，$limit 值必須大於0，會產生 1 ~ $limit 之間(有包括 $limit)的正整數。

1
2
3
4
5
6
7
8
9
10
11
12
.box{
  width: random(300)+px;
  height: random(300)+px;
  border-radius:50%;
}

// 轉成 CSS
.box {
  width: 155px;
  height: 101px;
  border-radius: 50%;
}

顏色輔助函式

比起顏色的加減，自己反而比較常用輔助函式，Sass 關於顏色方面的函式真的很多…有興趣可以直接看 Sass documents

  • darken($color, %): 回傳暗化的顏色
  • lighten($color, %): 回傳亮化的顏色
  • adjust-hue($color, degree): 回傳調整色相後的顏色
  • invert($color): 回傳相反色
  • fade-in($color, %): 顏色增加不透明度
  • fade-out($color, %): 顏色減少不透明度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$color: #beed25;
.btn{
  background-color: $color;
  &:hover{
    background-color: darken($color, 8%);
  }
  &:active{
    background-color: lighten($color, 8%);
  }
  &.btn-secondary{
    background-color: invert($color);
  }
}

// 轉成 CSS
.btn {
  background-color: #beed25;
}
.btn:hover {
  background-color: #a9d712;
}
.btn:active {
  background-color: #c9f04b;
}
.btn.btn-secondary {
  background-color: #4112da;
}

以上例來說，使用顏色的輔助函式可以很方便的產生按鈕不同狀態下的顏色，且這些顏色是有整體關聯性的，當主顏色被改變時，其他狀態的顏色也會跟著變化。

list 與 map 的輔助函式

之前提到的 list 和 map 其實最常和表達式指令一起使用。例如 @for、@each 它們都具有遍歷的特性，在遍歷中取特定的值就需要依靠 list 和 map 的輔助函式。

list 可用的 function

  • length($list): 取得 list 的長度
  • nth($list，index): 取得 list 索引位置的值(index 從 1 開始)
  • index($list，val): 取得 list 某個值的索引位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$types: primary, secondary, danger, warn, success;
$colors: blue, gray, red, orange, green;

// 使用 @for 來產生一系列的 btn 樣式
@for $i from 1 through length($types){
  .btn-#{nth($types, $i)}{
    background-color: nth($colors, $i);
    color: white;
  }
}

// 轉成 CSS
.btn-primary {
  background-color: blue;
  color: white;
}

.btn-secondary {
  background-color: gray;
  color: white;
}

.btn-danger {
  background-color: red;
  color: white;
}

.btn-warn {
  background-color: orange;
  color: white;
}

.btn-success {
  background-color: green;
  color: white;
}

map 可用的 function

  • map-get（$map，$key）: 取得 key 的 value
  • map-keys（$map）: 取得 map 所有的 key
  • map-values（$map）: 取得 map 所有的 value
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$btns: (primary: blue, secondary: gray, danger: red, warn: orange, success: green);
$className: map-keys($btns);

@for $i from 1 through length($className){
  .btn-#{nth($className, $i)}{
    background-color: map-get($btns, nth($className, $i));
  }
}

// 轉成 CSS
.btn-primary {
  background-color: blue;
}

.btn-secondary {
  background-color: gray;
}

.btn-danger {
  background-color: red;
}

.btn-warn {
  background-color: orange;
}

.btn-success {
  background-color: green;
}

非常多此一舉的範例 XDDD
用 list 還是 map 都可以達成想要的結果~所以就看自己對哪一種方式比較上手囉!
其實官網還有很多關於它們可用的函式，但有沒有功力用到就是個人的本事了….恕我愚鈍只會這幾種 QQ

以上內容如有勘誤，還請不吝告知🙇