less高级

条件表达式

.test(@size) when (@size >= 10){
  width: @size;
  color: #f00;
}

类型检测

.test(@param) when (iscolor(@param)){
  color: @param;
}
.test(@param) when (isnumber(@param)){
  width: @param;
}

and、or、not

.test(@size) when (@size > 10) and (@size < 20){
  width: @size;
  color: #000;
}
.test(@size) when (@size < 10), (@size > 20){
  width: @size;
  color: #ff0;
}
.test(@size) when not (@size = 20){
  text-align: center;
}

高级参数用法

/* 不接受任何参数 */
.test(){
  ...
}
/* 接受任意多个参数 */
.test(...){
...
}
/* 接受1个参数 */
.test(@size: 1px){
  ...
}
/* 接受0~1个参数 */
.test(@size){
  ...
}
/* 同样是接受任意多个参数 */
.test(@size: 1px, ...){
  ...
}
/* 接受1~N个参数 */
.test(@size, ...){
  ...
}

字符串插值

.test(@domain){
  background-image: url("@{domain}/img/test.png");
}

避免编译

.test(){
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

less中使用js

.el-a{
  font-size: 12px;
  color: #f00;
  &:before{
    @arr: 'hello', 'world';
    content: `@{arr}.join(' ').toUpperCase()`;
  }
}