less 内置函数

  1. escape(@string); // 通过 URL-encoding 编码字符串
  2. e(@string); // 对字符串转义
  3. %(@string , values...); // 格式化字符串
  4. unit(@dimension , [@unit: ""]); // 移除或替换属性值的单位
  5. color(@string); // 将字符串解析为颜色值
  6. data-uri([mimetype,] url); // * 将资源内嵌到css中,可能回退到url()
  7. ceil(@number); // 向上取整
  8. floor(@number); // 向下取整
  9. percentage(@number); // 将数字转换为百分比,例如 0.5 -> 50%
  10. round(number, [places: 0]); // 四舍五入取整
  11. sqrt(number); // * 计算数字的平方根
  12. abs(number); // * 数字的绝对值
  13. sin(number); // * sin函数
  14. asin(number); // * arcsin函数
  15. cos(number); // * cos函数
  16. acos(number); // * arccos函数
  17. tan(number); // * tan函数
  18. atan(number); // * arctan函数
  19. pi(); // * 返回PI
  20. pow(@base, @exponent); // * 返回@base的@exponent次方
  21. mod(number, number); // * 第一个参数对第二个参数取余
  22. convert(number, units); // * 在数字之间转换
  23. unit(number, units); // * 不转换的情况下替换数字的单位
  24. color(string); // 将字符串或者转义后的值转换成颜色
  25. rgb(@r, @g, @b); // 转换为颜色值
  26. rgba(@r, @g, @b, @a); // 转换为颜色值
  27. argb(@color); // 创建 #AARRGGBB 格式的颜色值
  28. hsl(@hue, @saturation, @lightness); // 创建颜色值
  29. hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
  30. hsv(@hue, @saturation, @value); // 创建颜色值
  31. hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
  32. hue(@color); // 从颜色值中提取 hue 值(色相)
  33. saturation(@color); // 从颜色值中提取 saturation 值(饱和度)
  34. lightness(@color); // 从颜色值中提取 'lightness' 值(亮度)
  35. hsvhue(@color); // * 从颜色中提取 hue 值,以HSV色彩空间表示(色相)
  36. hsvsaturation(@color); // * 从颜色中提取 saturation 值,以HSV色彩空间表示(饱和度)
  37. hsvvalue(@color); // * 从颜色中提取 value 值,以HSV色彩空间表示(色调)
  38. red(@color); // 从颜色值中提取 'red' 值(红色)
  39. green(@color); // 从颜色值中提取 'green' 值(绿色)
  40. blue(@color); // 从颜色值中提取 'blue' 值(蓝色)
  41. alpha(@color); // 从颜色值中提取 'alpha' 值(透明度)
  42. luma(@color); // 从颜色值中提取 'luma' 值(亮度的百分比表示法)
  43. saturate(@color, 10%); // 饱和度增加 10%
  44. desaturate(@color, 10%); // 饱和度降低 10%
  45. lighten(@color, 10%); // 亮度增加 10%
  46. darken(@color, 10%); // 亮度降低 10%
  47. fadein(@color, 10%); // 透明度增加 10%
  48. fadeout(@color, 10%); // 透明度降低 10%
  49. fade(@color, 50%); // 设定透明度为 50%
  50. spin(@color, 10); // 色相值增加 10
  51. mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
  52. greyscale(@color); // 完全移除饱和度,输出灰色
  53. contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor,否则输出 @lightcolor
  54. multiply(@color1, @color2);
  55. screen(@color1, @color2);
  56. overlay(@color1, @color2);
  57. softlight(@color1, @color2);
  58. hardlight(@color1, @color2);
  59. difference(@color1, @color2);
  60. exclusion(@color1, @color2);
  61. average(@color1, @color2);
  62. negation(@color1, @color2);
  63. iscolor(@colorOrAnything); // 判断一个值是否是颜色
  64. isnumber(@numberOrAnything); // 判断一个值是否是数字(可含单位)
  65. isstring(@stringOrAnything); // 判断一个值是否是字符串
  66. iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
  67. isurl(@urlOrAnything); // 判断一个值是否是url
  68. ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
  69. ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
  70. isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
  71. isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值

转载于:https://my.oschina.net/yangyan/blog/323701

### 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、付费专栏及课程。

余额充值