less-其他

！important关键字.PNG less中的注释.PNG 避免编译.PNG less中文网.PNG

// 1.注释
//  /* */css原生注释，会被编译在css文件中
//  /  /less提供的一种注释，不会被编译在css文件中

// 避免编译
#main {
    width: ~'calc(300px - 30px)'
}

// 变量拼串
// 在平时工作中，这种需求太常见了

.judge(@i) when(@i=1){
    @size: 15px;
} 
.judge(@i) when (@i>1){
    @size: 16px;
}
.loopAnimation(@i)when(@i<16){

    .circle:nth-child(@{i}) {
        .judge(@i);
        border-radius: @size @size 0 0;
        animation: ~"circle-@{i}" @duration infinite @ease;
        transition-delay: ~"@{i}ms" 
    }
    @keyframes ~"circle-@{i}" {
        // do something...
    }
    .loopAnimation(@i + 1)
}

// 使用JS
// 因为less是由js编写的，所以less有一项得天独厚的特性： 代码中使用javascript

@content: `"aaa".toUpperCase()`;
#randomColor{
    @randomColor: ~"rgb(`Math.round(Math.random() * 256)`, `Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`"
}

#wrap {
    width:~"`Math.round(Math.random() * 100)`px";
    &:after {
        content: @content;
    };
  height:~"`window.innerHeight`px";
  alert:~"`alert(1)`";
  #randomColor();
  background-color: @randomColor;
}
```![![！important关键字.PNG](https://img.haomeiwen.com/i3852630/606e92fa03295287.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://img.haomeiwen.com/i3852630/1d974d8b676d8403.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)