Less从入门到精通——运算（附学习视频、源码及笔记）

原创

那是一个憨憨 2021-09-17 14:45:32 博主文章分类：前端 ©著作权

文章标签 Less 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者那是一个憨憨的原创作品，请联系作者获取转载授权，否则将追究法律责任

完整学习视频及资料在这里哦~

链接：https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw

提取码：4k8t

运算

在Less中任何数值，颜色和变量都可以进行运算

1. 数值型运算

Less会为你自动推断数值的单位，所以你不必每一个值都加上单位。
运算的规则就和我们的数学上(加减乘除)的运算规则一样啦，这里不再赘述，只举一个示例。
注意：运算符与值之间必须以空格分开，涉及优先级时以( )包裹进行优先级运算。

.width{
    width: (100px + 50) * 2;
}
// 输出为
.width {
  width: 300px;
}

2. 颜色运算

Less在运算时，先将颜色转换为rgb模式（新版的Less已经可以自动转换，所以我们可以直接写颜色名称，例如black），然后在转换为16进制的颜色值并且返回。
rgb可以代表颜色的原理：r(red) g(green) b(blue)，所以它的三位分别代表了三种颜色的数值，最后三种颜色按照这种数值的混合最后得到的就是我们想要的颜色。
首先我们先简单了解一下rgb的运算，其实是各位分别进行运算。
注意：因为是转换为rgb模式，且rgb模式的取值范围是0~255，所以我们计算的时候不能超过这个区间，也不能低于这个区间，若计算后超过则按最大值255返回，计算后为负则以最小值 0 返回。

.content{
    color: black + 21;      // black的rgb为(0,0,0)所以运算后为（21，21，21）
}
.header{
    color: #666 - #444;     // 输出为 #222
}
.footer{
    color: rgb(255,0,0) + 15;        // 运算后为(255,15,15)，因为最大为255，所以第一位不变
}
// 输出为
.content {
  color: #151515;          // 将运算的（21，21，21）转换为16进制进行返回，以下类似
}
.header {
  color: #222222;
}
.footer {
  color: #ff0f0f;
}