条件判断

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);
}