less的四大特性及示例
1.特性一(变量)
less写法
@color:#ffffff;
body{background-color:@color;}
生成的css
body{background-color:#fffffff;}
2.特性二(混合)
less写法
.C_com(@name,@time){-webkit-transition: opacity 2s;
-moz-transition: @name @time;
-ms-transition: @name @time;
-o-transition: @name @time;
transition: @name @time;}
.C1{.C_com}
css写法
.c1 {
-webkit-transition: opacity 2s;
-moz-transition: opacity 2s;
-ms-transition: opacity 2s;
-o-transition: opacity 2s;
transition: opacity 2s;
}
3.特性三(嵌套)
less写法
ul{list-style-type:none;
li{float: left;
a{line-height:20px;
&:hover{background: #000;
}}}}
css写法
ul {list-style-type: none;}
ul li {float: left;}
ul li a {line-height: 20px;}
ul li a:hover {background: #000;}
4.特性四(函数运算)
less写法
@width:500px;
div{width:@width/5;}
css写法
div{width:100px;}