Less学习--部分函数

更多函数请查看官方文档:less英文官方文档

@rules:{
  	color:red;
};
@lists:1,2,3,4,5,6;

p{
	//isnumber:是否是数字;
	padding-right:isnumber(#ff0);
	padding-left:isnumber(12px);
	//isstring是否是字符串
	width:isstring("string");
	//isurl是否是url
	height:isurl(url("www.baidu.com"));
	//iskeyword是否是关键字
	margin-bottom: iskeyword(keyword);
	//iscolor是否是颜色
	color: iskeyword(#fff);
	//ispixel是否是px
	padding-top:ispixel(56px); 
	//isem是否是em
  	padding-bottom: isem(7.8em);
  	//ispercentage是否是percent
  	marker-end:ispercentage(7.8%) ;
  	//isunit单位是否匹配
  	margin-top:isunit(11px, px);
  	//max:找出最小值;
  	margin-left: min(1,5,9,0);
  	//max:找出最大值; 
  	content:max(10,5,6);
  	//mod求余运算,返回第一个参数的单位
  	margin-right:mod(26px,5cm);
  	//pow返回x的y次方,返回第一个参数的单位
  	border-left:pow(25,0.5) ;
  	//pi
  	border-right:pi();
  	//atan计算反正切函数返回以弧度表示的数字
  	border-bottom:atan(0);
  	//tan计算正切函数
  	border-top:tan(1grad);
  	//acos计算反余弦函数返回以弧度表示的数字
  	border-top-left:acos(0.5);
  	//cos计算余弦函数
  	border-top-right:cos(120deg);
  	//asin计算反正弦函数返回以弧度表示的数字
  	border-bottom-left:asin(1);
  	//sin计算正弦函数
  	border-bottom-right:sin(120deg);
  	//sqrt计算数字的平方根
  	box-sizing: sqrt(25);
  	//abs计算数字的绝对值
  	border-top-right-radius: abs(-25);
  	//round(m,n)将m四舍五入到第n位
  	border-bottom-right-radius:round(0.255,2);
  	//percentage将浮点数转换为百分比字符串
  	border-bottom-left-radius:percentage(0.5);
  	//floor向下取整
  	border-top-left-radius:floor(2.6);
  	//ceil向上取整
  	border-top-radius:ceil(2.6);
  	/*hsl
  	根据色相,饱和度和亮度(HSL)值创建不透明的颜色对象。
  	参数:
	    hue:整数0-360,代表度。
	    saturation:百分比0-100%或数字0-1。
	    lightness:百分比0-100%或数字0-1。*/
  	border-right-radius: hsl(180,0.5,0.5);
  	// 如果要基于另一种颜色的通道创建新颜色,这将很有用,
  	//计算颜色对象的亮度
  	border-bottom-radius: luma(rgb(100, 200, 30));
  	//在不进行伽玛校正的情况下计算亮度值
  	border-left-radius:luminance(rgb(100, 200, 30));
 	//length返回值列表中的元素数
 	overflow:length(@lists);
 	//extract返回列表中指定位置的值
 	overflow-x:extract(@lists, 3);
 	//range生成跨越一系列值的列表
 	overflow-y: range(1,5,2);
 	//color指定颜色的字符串
 	border-top-style:color("#aaa");
 	//image-size获取图片尺寸
 	border-right-style:image-size("./0.jpg");
 	//lighten将HSL颜色空间中的颜色亮度绝对增加
 	border-bottom-style:lighten(hsl(90, 80%, 50%), 20%);
 	//overlay结合了的效果multiply和screen。有条件地使光通道变亮,而黑暗通道变暗
 	border-left-style:overlay(#ff6600, #333333);
 	//softlight类似于overlay但避免纯黑色导致纯黑色,而纯白色导致纯白色
 	border-top-right-style:softlight(#ff6600, #333333);
 	//multiply将两种颜色相乘。两种颜色中每种颜色的对应RGB通道相乘然后除以255
 	text-overflow:multiply(#000000,#feae58); 
 	//screen做与multiply相反的事情
 	overflow-wrap:screen(#ff6600, #333333);;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值