Less运算和函数

Less运算

在我们的 CSS 中，充斥着大量数值型的 value，比如 color、padding、margin 等。在某些情况下，这些数值之间是有着一定关系的，那么我们怎样利用 Less来组织这些数值之间的关系呢？请看以下Less代码：

@init: #111111;
@transition: @init*2;
.switchColor {
    color: @transition;
 }

编译后的CSS代码为：

.switchColor {
   color: #222222;
 }

上面的例子中，使用的是 Less 中的 operation特性。简单的讲，就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算，可以对任何数值型的 value（数字、颜色、变量等）进行运算，来实现它们之间的复杂关系。

毫不夸张地说，Less 的运算已经超出了我们的期望，因为它能自动推断出颜色和数值的单位。比如像下面这样单位运算，将会输出 6px：

@var: 1px + 5;

同样，也允许使用括号：

width: (@var + 5) * 2;

并且，还可以在复合属性中进行运算：

border: (@width * 2) solid black;

Less函数

Less 中，提供了丰富的颜色和数学函数。比如，针对 color 专门提供了一系列的颜色运算函数，这些函数会先将颜色转化成 HSL 色彩空间，然后在通道级别进行操作。Less提供了以下颜色运算函数：

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *Less* saturated than @color
fadein(@color, 10%);      // return a color 10% *Less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency
spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2);    // return a mix of @color1 and @color2

这些函数使用起来相当简单，就跟使用 JavaScript 中的函数一样。Less 文件如下：

@init: #f04615;
#body {
   background-color: fadein(@init, 10%);
 }

编译后的CSS代码为：

#body {
   background-color: #f04615;
}

这些都是Less的简单用法，当你完全掌握Less语法后，你会发现可以用Less做更多JavaScript的工作。当然，这里只是抛砖引玉，在第3章，将对Less函数进行详细介绍。