[Day 12] Sass - 常用的内建Modules

Math、Color

Sass有提供一些内建的Modules，在写CSS时如果能活用会有很大的帮助，这里介绍两个比较常用的Modules

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 除法

上面简单介绍一些常用的用法，还有更多像是三角函数、绝对值之类的进阶用法有兴趣可以看参考资料~

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常用的用法，还有很多进阶用法有兴趣可以看参考资料~