less 运算、函数

时间：2025-01-18 20:30:47

今天来说一下less的运算和函数。less 运算还是比较简单的， 其函数主要是less为css添加了一些函数功能，也不是很难，记住它就行。如果实在记不住，知道有这个函数就行。

一、less 的运算

less的运算很简单我直接上代码，大家应该就可以看懂。

@width:10%;
.myP{
    width:@width;
    position:absolute;
    left:50%-@width/2;
    height:100px;
    .mixin(red, #657);
}

上面的代码很容易的就实现了将元素定位到正中间。（当然用margin:0 auto；也行，不过有些情况margin：0 auto 是不起作用的）

还有下面

width:10px+4;  // 结果是 14px

color:#222+#333; //颜色也是可以相加的

boder:2px*3 solid #458; //也是可以的

一、less 函数 （比较多只写一部分）

如果你想了解所有函数：请访问官网/functions/#color-operations

数学函数

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

round(2.5);  // returns `3` 四舍五入 它还有第二个参数，保留给几个小数取舍
ceil(2.4);    // returns `3` 向上取整
floor(2.6);  // returns `2`  向下取整
percentage(0.5);  // returns `50%`  //取百分数
min(10%,20%,30%,40%);  // returns  10%  取最小
max(10%,20%,30%,40%);  // returns  40%   取最大

颜色函数

LESS提供了一些处理颜色的函数：
①颜色定义函数：
②颜色通道函数：
③颜色操作函数：
④颜色混合函数：

相关文章