less函数传参 less 函数

转载

jordana 2024-05-30 08:43:39

文章标签 less函数传参 less Math 条件判断取整 文章分类 架构后端开发

一、LESS
1.条件判断
在less中我们可以通过条件判断实现渲染不同的样式,有点像switch,不是通过if实现的,而是when实现
在when方法中添加条件时,不需要单位
当判断相等时,使用=实现,没有==和===
判断多个条件时使用and关键字,配合when使用 when and
判断非语句,使用not, when not
2.函数-Math
在less中我们可以像js中使用Math对象一样使用less中的数学函数
Floor():向下取整(参数可以带单位)
Ceil():向上取整
Round():四舍五入
Percentage():将数值转换为百分数,(参数如果带有%单位是无效的),参数只能是数字
sqrt():平方根
abs():绝对值
sin():sin函数
asin():arcsin函数
cos():cos函数
acos():arccos函数
tan():tan函数
atan();arctan函数
pi():返回π
pow(a,b):次方 a的b次方
mod(m,n):m对n取余
convert(m,n):数字之间的转换
unit(m,n):不转换情况下替换数字的单位
3.颜色定义函数
rgb():可以生产一个16进制的色彩值,标准色彩方法
语法：rgb(red,green,blue);
每个值都是0-255
rgba():rgba(red,green,blue,alpha)
红绿蓝透明度
hsl():表示色相,饱和度,亮度模式,是一种工业标准色彩模式
语法：hsl(h,s,l)
h:色相,表示某一个颜色(0-360)
s:饱和度,色彩的浓度,单位是百分数,0%表示灰色,100%表示纯色
l:亮度,单位也是百分比,0%表示黑色,100%表示白色
4.颜色通道
less中色彩通道的方法：
red():获取色中的红色通道
green():获取色中的绿色通道
blue():获取色中的蓝色通道
alpha():获取色中的透明度通道
hue():获取色中的色值通道,数字(0-360)
saturation():获取色中的饱和度通道,百分数
lightness():获取色中的亮度通道,结果是百分数
这七个通道方法都只能接受一个参数,这个参数就是某个颜色
灰色是由三个相同的通道组成的,值越小灰度越大
5.颜色操作
颜色操作类函数,用于处理色彩
fade():对色彩进行透明度处理
fade(color,alpha)
fade(red,0.4)
fadeIn():表示增加透明度,当第一个参数不是颜色时,得到的是一个16进制不透明的颜色,透明度大于1
fadeout():透明度减少,可以接受两个参数,第一个表示颜色,第二个表示透明度的变化,是一个百分数
greyscale():得到混合色灰色的颜色值,接受一个表示颜色的参数
mix():将两种颜色混合,默认情况下取两种颜色相加后的平均值,第三个参数表示取的数值,是百分比,表示色彩混合的一个权重
saturate():增加饱和度
参数1：颜色
参数2：饱和度的增加量
desaturate():减少饱和度
lighten():提高颜色亮度
参数1：颜色
参数2：提高的亮度
darken():降低颜色亮度
6.色彩混合函数
这个函数只做颜色处理,不处理图片
softlight:柔光处理
参数1：底色
参数2：添加色
hardlight:强光处理
参数1：底色
参数2：添加色