Less 内置函数 #

Less 提供了丰富的内置函数，用于处理颜色、数学运算、字符串、列表等，让你能够动态地计算和转换样式值。

颜色函数 #

颜色函数是 Less 最常用的函数，用于定义和操作颜色。

颜色定义函数 #

rgb() 和 rgba() #

less

@color1: rgb(77, 146, 111);
@color2: rgba(77, 146, 111, 0.5);

.box {
  background: @color1;
  border-color: @color2;
}

hsl() 和 hsla() #

less

@color1: hsl(145, 31%, 44%);
@color2: hsla(145, 31%, 44%, 0.8);

.box {
  background: @color1;
}

hsv() 和 hsva() #

less

@color: hsv(145, 47%, 57%);
.box { background: @color; }

颜色通道函数 #

less

@color: #4d926f;

.box {
  red-value: red(@color);        // 77
  green-value: green(@color);    // 146
  blue-value: blue(@color);      // 111
  alpha-value: alpha(@color);    // 1
  hue-value: hue(@color);        // 145deg
  saturation-value: saturation(@color);  // 31%
  lightness-value: lightness(@color);    // 44%
}

颜色操作函数 #

saturate() 和 desaturate() #

less

@color: hsl(145, 31%, 44%);

.saturated {
  background: saturate(@color, 20%);  // 饱和度增加 20%
}

.desaturated {
  background: desaturate(@color, 20%);  // 饱和度降低 20%
}

lighten() 和 darken() #

less

@color: #4d926f;

.lighter {
  background: lighten(@color, 20%);  // 变亮 20%
}

.darker {
  background: darken(@color, 20%);  // 变暗 20%
}

fadein()、fadeout() 和 fade() #

less

@color: rgba(77, 146, 111, 0.5);

.more-opaque {
  background: fadein(@color, 20%);  // 透明度降低 20%（更不透明）
}

.more-transparent {
  background: fadeout(@color, 20%);  // 透明度增加 20%（更透明）
}

.set-alpha {
  background: fade(@color, 80%);  // 设置透明度为 80%
}

spin() #

less

@color: hsl(145, 31%, 44%);

.warmer {
  background: spin(@color, 30);  // 色相增加 30 度
}

.cooler {
  background: spin(@color, -30);  // 色相减少 30 度
}

mix() #

less

@color1: #ff0000;
@color2: #0000ff;

.mixed {
  background: mix(@color1, @color2, 50%);  // 50% 混合
}

.mixed-75 {
  background: mix(@color1, @color2, 75%);  // 75% color1, 25% color2
}

tint() 和 shade() #

less

@color: #4d926f;

.tinted {
  background: tint(@color, 50%);  // 与白色混合
}

.shaded {
  background: shade(@color, 50%);  // 与黑色混合
}

颜色对比函数 #

contrast() #

less

@color: #4d926f;

.text {
  color: contrast(@color);  // 返回对比色（黑或白）
}

// 指定对比色
.custom-contrast {
  color: contrast(@color, #000, #fff);  // 深色背景用白色，浅色背景用黑色
}

// 指定阈值
.with-threshold {
  color: contrast(@color, #000, #fff, 60%);
}

颜色转换函数 #

less

@color: #4d926f;

.converted {
  hsl-value: hsl(@color);      // hsl(145, 31%, 44%)
  hsv-value: hsv(@color);      // hsv(145, 47%, 57%)
  rgb-value: rgb(@color);      // rgb(77, 146, 111)
}

数学函数 #

基本运算 #

less

@width: 100px;

.box {
  width: @width + 20px;     // 120px
  height: @width - 20px;    // 80px
  padding: @width * 0.1;    // 10px
  margin: @width / 2;       // 50px
}

ceil() 和 floor() #

less

@value: 3.7;

.box1 { width: ceil(@value) * 1px; }   // 4px
.box2 { width: floor(@value) * 1px; }  // 3px

percentage() #

less

@value: 0.5;

.box {
  width: percentage(@value);  // 50%
}

round() #

less

@value1: 3.14159;
@value2: 3.14159;

.box1 { width: round(@value1) * 1px; }      // 3px
.box2 { width: round(@value2, 2) * 1px; }   // 3.14px

sqrt() #

less

@value: 16;

.box {
  width: sqrt(@value) * 1px;  // 4px
}

abs() #

less

@value: -10;

.box {
  margin: abs(@value) * 1px;  // 10px
}

sin()、cos()、tan() #

less

.box {
  sin-value: sin(1deg);    // 0.01745...
  cos-value: cos(0deg);    // 1
  tan-value: tan(45deg);   // 1
}

pow() #

less

.box {
  width: pow(2, 3) * 1px;  // 8px
}

mod() #

less

.box {
  width: mod(10, 3) * 1px;  // 1px
}

min() 和 max() #

less

@values: 10px, 20px, 30px;

.box1 { width: min(@values...); }  // 10px
.box2 { width: max(@values...); }  // 30px

字符串函数 #

escape() #

less

@string: "a=1";

.escaped {
  content: escape(@string);  // a%3D1
}

e() #

less

@value: 10px + 20px;

.box {
  width: e("@{value}");  // 30px（作为 CSS 值，不带引号）
}

%() 格式化 #

less

@type: button;
@color: primary;

.selector {
  name: %("btn-%a-%a", @type, @color);  // "btn-button-primary"
}

// 大写转换
.upper {
  name: %("BTN_%A_%A", @type, @color);  // "BTN_BUTTON_PRIMARY"
}

replace() #

less

@string: "Hello, World!";

.replaced {
  content: replace(@string, "World", "Less");  // "Hello, Less!"
}

// 使用正则表达式
.regex {
  content: replace(@string, "W\\w+", "Less");  // "Hello, Less!"
}

列表函数 #

length() #

less

@list: apple, banana, cherry;

.box {
  count: length(@list);  // 3
}

extract() #

less

@list: apple, banana, cherry;

.box {
  first: extract(@list, 1);   // apple
  second: extract(@list, 2);  // banana
  third: extract(@list, 3);   // cherry
}

range() #

less

@list: range(5);        // 1, 2, 3, 4, 5
@list2: range(2, 5);    // 2, 3, 4, 5
@list3: range(0, 10, 2); // 0, 2, 4, 6, 8, 10

each() #

less

@list: blue, red, green;

each(@list, {
  .box-@{value} {
    background: @value;
  }
});

编译结果：

css

.box-blue {
  background: blue;
}
.box-red {
  background: red;
}
.box-green {
  background: green;
}

数学常量 #

less

.box {
  pi: pi();           // 3.14159265...
  e-value: e();       // 2.71828182...
}

类型函数 #

类型检查 #

less

@color: #fff;
@number: 10px;
@string: "hello";
@list: 1, 2, 3;

.check {
  is-color: iscolor(@color);       // true
  is-number: isnumber(@number);    // true
  is-string: isstring(@string);    // true
  is-list: islist(@list);          // true
  is-url: isurl("url(...)");       // true
  is-pixel: ispixel(10px);         // true
  is-em: isem(1em);                // true
  is-percentage: ispercentage(50%); // true
  is-unit: isunit(10px, px);       // true
}

get-unit() #

less

@value1: 10px;
@value2: 10;

.box1 { unit: get-unit(@value1); }  // px
.box2 { unit: get-unit(@value2); }  // (空)

unit() #

less

@value: 10px;

.box1 { width: unit(@value, em); }   // 10em
.box2 { width: unit(@value); }       // 10（移除单位）

杂项函数 #

color() #

less

@string: "#4d926f";

.box {
  background: color(@string);  // #4d926f（转换为颜色）
}

convert() #

less

@value1: 10cm;
@value2: 180deg;

.box1 { width: convert(@value1, mm); }  // 100mm
.box2 { angle: convert(@value2, rad); } // 3.14159...rad

data-uri() #

less

// 将文件编码为 base64 URI
.box {
  background: data-uri("image.png");
}

default() #

less

.mixin(@value) when (@value = red) {
  color: red;
}

.mixin(@value) when (default()) {
  color: #333;
}

.red { .mixin(red); }
.other { .mixin(blue); }

实用示例 #

颜色系统生成 #

less

@primary: #007bff;

.btn {
  &-primary {
    background: @primary;
    border-color: darken(@primary, 5%);
    
    &:hover {
      background: darken(@primary, 10%);
    }
    
    &:active {
      background: darken(@primary, 15%);
    }
  }
  
  &-outline-primary {
    background: transparent;
    color: @primary;
    border-color: @primary;
    
    &:hover {
      background: @primary;
      color: contrast(@primary);
    }
  }
}

响应式字体大小 #

less

.font-size-responsive(@min-size, @max-size, @min-width: 320px, @max-width: 1200px) {
  font-size: @min-size;
  
  @media (min-width: @min-width) {
    font-size: calc(@min-size ~"+" (@max-size - @min-size) ~"*" ((100vw - @min-width) ~"/" (@max-width - @min-width)));
  }
  
  @media (min-width: @max-width) {
    font-size: @max-size;
  }
}

.heading {
  .font-size-responsive(16px, 24px);
}

间距工具类 #

less

@spacing-base: 8px;

each(range(0, 6), {
  .p-@{value} { padding: @value * @spacing-base; }
  .m-@{value} { margin: @value * @spacing-base; }
  
  .pt-@{value} { padding-top: @value * @spacing-base; }
  .pb-@{value} { padding-bottom: @value * @spacing-base; }
  .pl-@{value} { padding-left: @value * @spacing-base; }
  .pr-@{value} { padding-right: @value * @spacing-base; }
  
  .mt-@{value} { margin-top: @value * @spacing-base; }
  .mb-@{value} { margin-bottom: @value * @spacing-base; }
  .ml-@{value} { margin-left: @value * @spacing-base; }
  .mr-@{value} { margin-right: @value * @spacing-base; }
});

下一步 #

现在你已经掌握了内置函数，接下来学习运算来处理数值计算！