less基础2 less基础2

（每次学循环必懵。。。。）
“在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。”
所以什么是Guard表达式和模式匹配？
less对于判断也有很大需求，但是less没用采用if/else相似，而是用when来装条件，条件满足了在执行大括号里边的内容。
when()中可以放关于@n的表达式、可以放内置函数、is函数。

.mixin(@n) when(@n > 5){ background: red; } .mixin(@n) when(@n < 5){ background: blue; } div{ .mixin(7); //调用，传入参数7, 7>5, 条件符合第一个，设置背景为red }

.mixin1(@n) when(lightness(@n) > 50%){ background: red; } //is函数: //iscolor、isnumber、isstring、iskeyword、isurl .mixin2(@n) when(iscolor(@n)){ background: @n; }

when中可以设置多条件，注意去掉when的括号并把条件加上括号：

.mixin(@n) when (@n > 5) and (@n < 10){ background: red; } .mixin(@n) when (@n > 5) , (@n < -5){ background: red; }

循环就是在以上的基础上再内容里调用自身。
方式1：

.loop(@i) when (@i >= 0) { .loop((@i- 1)); // 递归调用自身 width: (10px * @i); } div{ .loop(5); //@i的值可以取5、4、3、2、1、0 }

方式2：

.loop(@n, @i:1) when (@i <= @n ) { li:nth-child(@{i}){ background-image: url('../images/page5_bubble.png'); } .loop(@n, (@i + 1)); } ul { .loop(5); //@i值可以取1、2、3、4、5，为ul的每个li设置背景

【less基础2】注意有时不能直接用@i，有时需要为其加上括号：@{i}。