标签：逗号 wim 表示 less ops 之间 idt none logs
@color : #ff0000;
@length : 100px;
#div1{
width: @length;
height: @length;
background-color: @color;
}
变量使用规则
多次频繁出现的值，后期需要统一修改的值，牵扯到数值运算的值，推荐使用变量。
.boderradius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.boderradius1(@radius){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.boderradius2(@radius:10px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius
.class{
width: 10px;
height: 10px;
.boderradius2();
}
.piPei(lefts,@width:10px){
margin-left: @width;
}
.piPei(rights,@width:10px){
margin-right: @width;
}
.piPei(tops,@width:10px){
margin-top: @width;
}
.piPei(bottoms,@width:10px){
margin-bottom: @width;
}
.piPei(@_,@width:10px){
margin-bottom: @width;
}
@position:lefts;
.class1{
.piPei(@position,10px);
}
.argu(@width,@style,@color){
//border:@width @style @color;
border: @arguments;//跟上面boder效果一样
}
.class2{
.argu(10px,solid,#ff0000)
}
#section{
width: 800px;
height: 200px;
background-color: #ccc;
p{
color: red;
}
ul{
list-style: none;
>li{
float: left;
width: 200px;
height: 50px;
&:hover{
background-color: yellow;
}
}
}
}
以上就是我简单整理的less的基本语法，可能不是太好看，但是希望能对看到这篇文章的人有所帮助，谢谢了
????~~
标签：逗号 wim 表示 less ops 之间 idt none logs
原文地址：http://www.cnblogs.com/zhanghaoxiaoan/p/7533612.html
