LESS 函数方法

混合 (misc)

// 字符转颜色
color("#CCC") 

//返回图像尺寸(示例尺寸100*50)
image-size("file.jpg"); // => 100px 50px 
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px

// 单位转换
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8

字符串 (String)

// 转义
filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()"); // 与~"value"类似

// 替换
replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
replace("Hi Tom?", "(Tom).$", "new $1."); // => "Hi new Tom"

列表 (List)

@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C

数学运算 (Math)

ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 转百分比
round(1.67, 1); // => 1.7 四舍五入,保留一位小数点
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取绝对值
sin(1deg); // => 0.01745240643728351 正弦
asin(-0.8414709848078965); // => -1rad 反正弦
pi(); // => 3.141592653589793 圆周率π
max(3px, 42px, 1px, 16px); // => 42px
min(3px, 42px, 1px, 16px); // => 1px

判断类型 (Type)

isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(4rem, rem); // => true 是否为指定单位
isruleset(@rules); // => true 是否为变量

颜色定义 (Color Definition)

hsl(90, 100%, 50%) // => #80ff00 色相(H)、饱和度(S)、明度(L)
hsla(90, 100%, 50%, 0.5) // => rgba(128, 255, 0, 0.5) 色相(H)、饱和度(S)、明度(L)、透明度(A)
hsv(90, 100%, 50%) // => #408000 色调(H),饱和度(S),明度(V)
hsv(90, 100%, 50%) // => rgba(64, 128, 0, 0.5) 色调(H),饱和度(S),明度(V)、透明度(A)
hue(hsl(90, 100%, 50%)) // => 90 提取色相
saturation() // 饱和度
lightness() // 明度

颜色操作

增加饱和度
saturate(color, 20%)
减少饱和度
desaturate(color, 20%)
增加亮度
lighten(color, 20%)
减少亮度
darken(color, 20%)
降低透明度
fadein(color, 10%)
增加透明度
fadeout(color, 10%)
设置绝对不透明度(覆盖原透明度)
fade(color, 20%)
旋转色调角度
spin(color, 10)
将两种颜色混合,不透明度包括在计算中。
mix(#f00, #00f, 50%)
与白色混合
tint(#007fff, 50%)
与黑色混合
shade(#007fff, 50%)
灰度,移除饱和度
greyscale(color)
返回对比度最大的颜色
contrast(color1, color2)

颜色混合

每个RGB 通道相乘,然后除以255
multiply(color1, color2);
与 multiply 相反
screen(color1, color2);
使之更浅或更暗
overlay(color1, color2)
避免太亮或太暗
softlight(color1, color2)
与overlay相同,但颜色互换
hardlight(color1, color2)
计算每个通道(RGB)基础上的两种颜色的平均值
average(color1, color2)

参考手册:http://less.bootcss.com/functions/

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值