LESS 函数

Color 函数

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:

lighten(@color, 10%);     // 返回一个比 @color 浅10%的颜色
darken(@color, 10%);      // 返回一个比 @color 深10%的颜色
 
saturate(@color, 10%);    // 返回一个比 @color 饱和度高10%的颜色
desaturate(@color, 10%);  // 返回一个比 @color 饱和度低10%的颜色
 
fadein(@color, 10%);      // 返回一个比 @color 透明度低10%的颜色（更不透明）
fadeout(@color, 10%);     // 返回一个比 @color 透明度高10%的颜色（更透明）
fade(@color, 50%);        // 返回 @color 透明度为50%时的颜色
 
spin(@color, 10);         // 返回一个比 @color 色调大10度的颜色
spin(@color, -10);        // 返回一个比 @color 色调小10度的颜色
 
mix(@color1, @color2);    // 返回 @color1 和 @color2 的混合颜色

使用起来相当简单，这些函数也可以嵌套使用:

@base: #f04615;
 
.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

你还可以提取颜色信息:

hue(@color);        // 返回 @color 的色调
saturation(@color); // 返回 @color 的饱和度
lightness(@color);  // 返回 @color 的明暗度

如果你想在一种颜色的通道上创建另一种颜色，这些函数就显得那么的好用，例如:

@new: hsl(hue(@old), 45%, 90%);

@new 将会保持 @old的 色调, 但是具有不同的饱和度和亮度。

Math 函数

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:

round(1.67); // 返回 `2`
ceil(2.4);   // 返回 `3`
floor(2.6);  // 返回 `2`

如果你想将一个值转化为百分比，你可以使用percentage 函数:

percentage(0.5); // 返回 `50%`

转载本站内容时，请务必注明来自W3xue，违者必究。