1、内置函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。
函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

  1. @base: #f04615;
  2. @width: 0.5;
  4. .class {
  5.   width: percentage(@width); // returns `50%`
  6.   color: saturate(@base, 5%);
  7.   background-color: spin(lighten(@base, 25%), 8);
  8. }

2、自定义函数

  1. //无参函数
  2. .box() {
  3.   width: 100px;
  4.   height: 200px;
  5.   background-color: aqua;
  6. }
  8. //带参函数
  9. .boxWithParam(@w, @h, @c) {
  10.   width: @w;
  11.   height: @h;
  12.   background-color: @c;
  13. }
  15. //带默认参数函数
  16. .boxWithDefaultParam(@w: 100px, @h: 200px, @c: red) {
  17.   width: @w;
  18.   height: @h;
  19.   background-color: @c;
  20. }
  22. div {
  23.   //.box();
  24.   //.boxWithParam(60px,100px,yellow);
  25.   //.boxWithDefaultParam();
  26.   //.boxWithDefaultParam(60px,100px,yellow);
  27.   //可指定要传值的参数
  28.   .boxWithDefaultParam(@h: 600px, @c: yellow);
  29. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>less</title>
  6.     <!-- 这里引入的是lessc styles.less styles.css编译后的css文件 -->
  7.     <link rel="stylesheet" type="text/css" href="./styles.css" />
  8. </head>
  9. <body>
  10.     <div>
  11.         <span> aaa </span>
  12.     </div>
  13. </body>
  14. </html>