条件判断
Less 可以使用 when 关键字实现条件判断
.arrowSet() {
width: 0;
height: 0;
overflow: hidden;
border-width: @pixel;
border-style: solid;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = up) {
.arrowSet();
border-color:@color transparent transparent transparent;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = down) {
.arrowSet();
border-color:transparent transparent @color transparent;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = left) {
.arrowSet();
border-color:transparent transparent transparent @color;
}
.arrow(@direction, @color:#000, @pixel:5px) when (@direction = right) {
.arrowSet();
border-color:transparent @color transparent transparent;
}
.box {
.arrow(up);
.arrow(right, red, 100px);
}