欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Less运算和函数代码实例

程序员文章站 2022-07-02 18:22:35
Less运算和函数 Less运算 在我们的 CSS 中,充斥着大量数值型的 value,比如 color、padding、margin 等。在某些情况下,这些数值之间是有着一定...

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函数进行详细介绍。