Math、Color

Sass有提供一些內建的Modules，在寫CSS時如果能活用會有很大的幫助，這裡介紹兩個比較常用的Modules

1. Math: math modules可以讓開發者很簡單的對數字做簡單至複雜的運算，以及使用一些數學公式

@debug math.$pi; // 3.1415926536 圓周率
@debug math.ceil(4.2); // 5 無條件進位
@debug math.floor(4.2); // 4 無條件捨去
@debug math.max(1px, 5px, 15px, 12px); // 15px 找出最大的數值
@debug math.min(1px, 5px, 15px, 12px); // 1px 找出最小的數值
@debug math.div(1, 2); // 0.5 => 1/2 除法
@debug math.div(100px, 5px); // 20 => 100 / 5 除法

上面簡單介紹一些常用的用法，還有更多像是三角函數、絕對值之類的進階用法有興趣可以看參考資料~

2. Color: color modules可以讓開發者很簡單的對顏色做一些調整

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%); // #7c4465 將顏色調暗20%

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%); // #b08b5a 將顏色調暗40%

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%); // #a1a5af 將顏色調亮20%

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%); // #99ccff 將顏色調亮60%

// 互補色: 很常使用，像是hover或是需要吸引目光時都會用到互補色~
@debug color.complement(#6b717f); // #7f796b
@debug color.complement(#d2e1dd); // #e1d2d6

上面簡單介紹一些Color module常用的用法，還有很多進階用法有興趣可以看參考資料~

參考資料

https://sass-lang.com/documentation/modules/math
https://sass-lang.com/documentation/modules/color