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/

### Less 中的函数 #### 定义和调用自定义函数Less 中可以通过 `.` 或者 `()` 来创建简单的运算逻辑,不过对于更为复杂的操作,则可以利用 JavaScript 表达式来实现类似于函数的效果。然而,在官方文档里并没有直接提到像其他编程语言那样显式的`function`关键字用于定义函数[^2]。 为了达到类似函数的功能,通常会采用混合(Mixin)的方式配合参数传递完成特定的任务: ```less // 定义一个带参的 Mixin, 类似于定义了一个可重用的样式片段或者说是一个简易版的‘函数’ .myFunction(@color: red; @size: 10px){ color: @color; font-size: @size; } // 使用这个 ‘函数’, 并传入实际值覆盖默认参数 .callMyFunction { .myFunction(green, 20px); } ``` 这种做法虽然不是严格意义上的函数概念,但在日常开发中已经足够满足需求,并且保持了良好的语义化风格[^4]。 另外值得注意的是,Less 还内置了一些实用工具性质的方法,比如颜色处理、数学计算等,可以直接拿来即用而无需自己动手编写: ```less @base-color: #f06; div { background-color: lighten(@base-color, 10%); /* 调亮 */ border-color: darken(@base-color, 15%); /* 加深 */ } ``` 上述例子展示了如何运用内建的颜色调整方法来进行快速便捷的操作。 #### 总结 尽管 Less 不支持传统意义上通过 `function` 关键字声明函数语法结构,但是借助其强大的 Mixin 特性和丰富的内置辅助方法,完全可以构建出具有高度灵活性与复用性的代码模块。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值