Color 函数
LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:
lighten(@color, 10%); // 返回一个比 @color 浅10%的颜色 darken(@color, 10%); // 返回一个比 @color 深10%的颜色 saturate(@color, 10%); // 返回一个比 @color 饱和度高10%的颜色 desaturate(@color, 10%); // 返回一个比 @color 饱和度低10%的颜色 fadein(@color, 10%); // 返回一个比 @color 透明度低10%的颜色(更不透明) fadeout(@color, 10%); // 返回一个比 @color 透明度高10%的颜色(更透明) fade(@color, 50%); // 返回 @color 透明度为50%时的颜色 spin(@color, 10); // 返回一个比 @color 色调大10度的颜色 spin(@color, -10); // 返回一个比 @color 色调小10度的颜色 mix(@color1, @color2); // 返回 @color1 和 @color2 的混合颜色
使用起来相当简单,这些函数也可以嵌套使用:
@base: #f04615; .class { color: saturate(@base, 5%); background-color: lighten(spin(@base, 8), 25%); }
你还可以提取颜色信息:
hue(@color); // 返回 @color 的色调 saturation(@color); // 返回 @color 的饱和度 lightness(@color); // 返回 @color 的明暗度
如果你想在一种颜色的通道上创建另一种颜色,这些函数就显得那么的好用,例如:
@new: hsl(hue(@old), 45%, 90%);
@new 将会保持 @old的 色调, 但是具有不同的饱和度和亮度。
Math 函数
LESS提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值:
round(1.67); // 返回 `2` ceil(2.4); // 返回 `3` floor(2.6); // 返回 `2`
如果你想将一个值转化为百分比,你可以使用percentage 函数:
percentage(0.5); // 返回 `50%`
转载本站内容时,请务必注明来自W3xue,违者必究。
友情链接: