条件表达式
带条件的混合
比较运算符：< >= = =< < true
例子：
less编写
/* when 是关键字； lightness 是函数库里面的一个函数，作用是取得颜色值中的亮度，返回一个百分比的值 */
.mixin(@a) when (lightness(@a) >= 50%) {
/* 255/2=127.5≈128 */
background-color:black;
}
.mixin(@a) when (lightness(@a) < 50%) {
background-color:white;
}
.mixin(@a){
color:@a;
}
.class1{
.mixin(#ddd); /* 221 >= 128 (50%) */
}
.class2{
.mixin(#555);
}
编译结果
.class1{
background-color:black;
color:#ddd;
}
.class2{
background-color:white;
color:#555;
}
类型检查函数
可以基于值得类型来匹配函数
基本的类型检查函数有 iscolor、isnumber、isstring、iskeyword、isurl
例子：
less编写
.mixin(@a) when (iscolor(@a)) {
background-color:black;
}
.mixin(@a) when (isnumber(@a)) {
background-color:white;
}
.mixin(@a){
color:@a;
}
.class1{
.mixin(#7e7e7e);
}
.class2{
.mixin(123);
}
编译结果
.class1{
background-color:black;
color:#7e7e7e;
}
.class2{
background-color:white;
color:123;
}
单位检查函数
检查一个值除了数字是否是一个特定的单位
基本的单位检查函数 ispixel、ispercentage、isem、isunit
例子：
less编写
.mixin(@a) when (ispixel(@a)) {
background-color:black;
}
.mixin(@a) when (ispercentage(@a)) {
background-color:white;
}
.mixin(@a){
width:@a;
}
.class1{
.mixin(960px);
}
.class2{
.mixin(95%);
}
编译结果
扫描二维码关注公众号，回复：
12404017 查看本文章
.class1{
background-color:black;
width:960px;
}
.class2{
background-color:white;
width:95%;
}
循环（loop）
在Less中，混合可以调用它自身，这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构
例子
Less编写
.loop(@counter) when (@counter > 0){
.loop((@counter - 1)); //递归调用自身
width:(10px * @counter); //每次调用时产生的样式代码
}
div{
.loop(5); //调用循环
}
编译结果
div{
width:10px;
width:20px;
width:30px;
width:40px;
width:50px;
}
例子
Less编写
.loop(@counter) when (@counter > 0){
h@{
counter}{
padding:(10px * @counter);
}
.loop((@counter - 1)); //递归调用自身
}
div{
.loop(6); //调用循环
}
编译结果
div h6{
padding:60px;
}
div h5{
padding:50px;
}
div .h4{
padding:40px;
}
div h3{
padding:30px;
}
div h2{
padding:20px;
}
div h1{
padding:10px;
}
合并属性
在需要合并的属性的 ： 的前面加上 + 就可以完成合并，合并以 ， 分隔属性
例子
Less编写
.mixin(){
box-shadow+:inset 0 0 10px #555;
}
.myclass{
.mixin();
box-shadow+: 0 0 20px blcak;
}
编译结果
.myclass{
box-shadow+:inset 0 0 10px #555, 0 0 20px blcak;
}
用+_空格分隔所合并的属性值
例子
Less编写
.a(){
background+_:#f60;
background+_:url(/sss.jod);
}
.myclass{
.a();
}
编译结果
.myclass{
background:#f60 url(/sss.jod);
}