★变量
用@定义
@cg:green;
@cr:red;
@cy:yellow;
使用：
.passage{
color:@cg;
background-color:@cr;
border-color:@yellow;
}
编译后：
.passage{
color:green;
background-color:red;
border-color:yellow;
}
★运算
变量可以进行简单运算
★注释
/***********正常注释************/
//其他语言习惯注释 编译时去掉 只被保留在.less文件中
★任性！不想被编译
与其说任性不如说微软比较任性 即使再NB也必须迁就使用微软的庞大用户群
有一些属性 比如滤镜（类似webkit中的opacity透明度）less不能识别 也可能以后会出现less识别不了的属性 需要处理
使用波浪线加一对单引号可以包含不想被编译的内容 如 ~’i do not want to get translated !’
★函数(混合1)
为类附加参数
定义：
.border-radius(@radius:10px,@style:solid){
-webkit-border-radius:@radius @style #313131;
-moz-border-radius:@radius @style #313131;
-o-border-radius:@radius @style #313131;
-ms-border-radius:@radius @style #313131;
border-radius:@radius @style #313131;
}
使用：
直接使用
.border-radius();//默认使用圆角10px, 样式直线
编译后：
.border-radius{
-webkit-border-radius:10px solid #313131;
-moz-border-radius:10px solid #313131;
-o-border-radius:10px solid #313131;
-ms-border-radius:10px solid #313131;
border-radius:10px solid #313131;
}
或使用改变变量
.border-radius(30px, dashed);//使用圆角30px，样式虚线
编译后：
.border-radius{
-webkit-border-radius:30px dashed #313131;
-moz-border-radius:30px dashed #313131;
-o-border-radius:30px dashed #313131;
-ms-border-radius:30px dashed #313131;
border-radius:30px dashed #313131;
}
★混合2
整个类的属性当做变量添加到新类中 并 附加其他属性
.img(@width:100px, @height:60px, @size:contain){
width:@width;
height:@height;
background-repeat:no-repeat;
background-size:@size;
}
使用
.img1{
.img();
background:url(…);
}
编译后：
.img1{
width:100px;
height:60px;
background-repeat:no-repeat;
background-size:contain;
background:url(…);
}
★混合3
无键参数
//三个动画
@keyform ani1{
…
}
@keyform ani2{
…
}
@keyform ani3{
…
}
//使用动画的三个类
.box1(ani1, @time:8s, @locus:linear){//使用动画1 轨迹直线
animation:ani1 @time @locus infinite running;
}
.box2(ani2, @time:10s, @locus:ease){//使用动画2 轨迹先快后慢再快
animation:ani1 @time @locus infinite running;
}
.box3(ani3, @time:20s, @locus:cubic-bezier(0.1,0.2,0.5,1)){//使用动画3 轨迹自定义贝塞尔曲线
animation:ani1 @time @locus infinite running;
}
//——————————————————————
.box(@_, @time,@locus){
animation-name:@_;
}
使用
.i-box{
.box(ani1,8s,linear);
}
即使用了box1的属性:动画1 轨迹直线
值得注意 虽然.box中的@time和@locus在.box中没用 但必须加上
如果@_没有匹配到 则会出现只有@time和@locus被编译
如下
.i-box{
animation: 8s linear infinite running;//没有动画名 报错！！！
}
★嵌套
&表示父元素
.list{
li{
list-style:none;
margin:0;
padding:0;
a{
font-size:#313131;opacity:0.5;
&:hover{ opacity:1; }
}
}
}
编译后:
.list li{
list-style:none;
margin:0;
padding:0;
}
.list li a{
font-size:#313131;opacity:0.5;
}
.list li a:hover{
opacity:1;
}
★超级懒B头顶称号arguments
@arguments可以代表所有参数
.box(@border-width:10px,@border-color:green,@border-line-style:solid){
border:@arguments;
}
使用:
.box();或.box(20px);
★important的继承
加！important的类 其中包含的属性都会添加important属性 可以用作测试