less的基本操作

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；}