1. 颜色函数
- lighten(@color, @amount):使颜色变亮。
- darken(@color, @amount):使颜色变暗。
- saturate(@color, @amount):增加颜色的饱和度。
- desaturate(@color, @amount):降低颜色的饱和度。
- spin(@color, @amount):旋转颜色的色相。
2. 字符串函数
- e(@string):对字符串进行 URL 编码。
- escape(@string):对字符串进行 CSS 转义。
- replace(@string, @pattern, @replacement):替换字符串中的子字符串。
3. 数学函数
- ceil(@number):向上取整。
- floor(@number):向下取整。
- percentage(@number):将数值转换为百分比。
- round(@number):四舍五入。
4. 列表函数
- length(@list):返回列表的长度。
- extract(@list, @index):从列表中提取指定位置的值。
5. 其他函数
- unit(@number, @unit):将数值转换为指定单位。
- type-of(@value):返回值的数据类型。
以下是一些函数的例子:
// 使用颜色函数
.lighter-color {
background-color: lighten(#3498db, 20%);
}
// 使用字符串函数
.escaped-string {
content: e("This is a string");
}
// 使用数学函数
.rounded-number {
font-size: round(14.567);
}
// 使用列表函数
.list-example {
length: length(1px 2px 3px);
value: extract(1px 2px 3px, 2);
}
// 使用其他函数
.unit-example {
width: unit(100, px);
type: type-of("Hello, World!");
}
这些函数能够提供强大的工具,使得在 Less 中进行更灵活的样式操作成为可能。你可以根据具体需求选择适当的函数。
转载请注明出处:http://www.zyzy.cn/article/detail/4301/Less