Less 函数

Less 提供了一组内置函数来处理颜色、数学运算和其他类型的值。这些函数可以让你更灵活地控制样式，而无需手动计算或调整数值。

颜色函数

rgba

rgba(color, alpha) 函数用于创建一个带有指定透明度的颜色。它接受一个颜色值和一个介于0到1之间的透明度值。

@color: #4D26FA;
@transparent-color: rgba(@color, 0.5);

hsla

hsla(hue, saturation, lightness, alpha) 函数用于根据色相、饱和度、亮度和透明度值创建颜色。与 rgba 类似，透明度值应该在0到1之间。

@hue: 200;
@saturation: 80%;
@lightness: 50%;
@alpha: 0.7;

@color: hsla(@hue, @saturation, @lightness, @alpha);

lighten 和 darken

lighten(color, amount) 和 darken(color, amount) 函数分别用于增加和减少颜色的亮度。它们接受一个颜色值和一个介于0%到100%之间的百分比。

@original-color: #FF6347;
@brighter-color: lighten(@original-color, 10%);
@darker-color: darken(@original-color, 10%);

saturate 和 desaturate

saturate(color, amount) 和 desaturate(color, amount) 函数分别用于增加和减少颜色的饱和度。它们接受一个颜色值和一个介于0%到100%之间的百分比。

@original-color: #FF6347;
@more-saturated-color: saturate(@original-color, 10%);
@less-saturated-color: desaturate(@original-color, 10%);

spin

spin(color, degrees) 函数用于改变颜色的色相。它接受一个颜色值和一个角度值（正数表示顺时针旋转，负数表示逆时针旋转）。

@original-color: #FF6347;
@rotated-color: spin(@original-color, 30);

数学运算

加法、减法、乘法和除法

你可以使用标准的算术运算符进行加法、减法、乘法和除法运算。Less 会自动处理单位，确保结果是有效的 CSS。

@base-size: 10px;
@double-size: @base-size * 2; // 20px
@half-size: @base-size / 2; // 5px
@sum-size: @base-size + 10px; // 20px
@diff-size: @base-size - 2px; // 8px

变量间的数学运算

你也可以对变量进行数学运算，这使得代码更加动态且易于维护。

@base-margin: 10px;
@double-margin: @base-margin * 2; // 20px

函数形式的数学运算

Less 还提供了几个用于数学运算的函数，如 percentage()、round() 等。

percentage

percentage(value) 函数将一个数值转换为百分比形式。

@ratio: 0.5;
@percentage-value: percentage(@ratio); // 50%

round

round(value) 函数用于四舍五入一个数值。

@value: 10.7;
@rounded-value: round(@value); // 11

通过利用这些内置函数，你可以编写出更简洁、可维护和功能强大的 Less 代码。这些函数不仅简化了常见的任务，还增强了你的样式表的灵活性。