Less 提供了丰富的内建函数,用于处理颜色、字符串、数学运算等。以下是一些 Less 中常用的其他函数:

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