less实用语法

一. 变量

 1 @ 10px;
 2 @height: @width + 10px;//带单位的加减, 以运算符左边单位为主
 3 
 4 #header {
 5    @width;
 6   height: @height;
 7 }
 8 编译为
 9 #header {
10    10px;
11   height: 20px;
12 }

二. 代码片段(混合)

.center(@type:absolute){//定义代码片段center,其中()可以不带;带()表示是代码片段, 不生成最终代码, 而不带表示class, 会生成代码
  position: @type;//参数可以多个
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.wrapper{
  position: relative;
  height: 300px;
   300px;
  background: red;
  .inner{
     100px;
    height: 100px;
    background: yellow;
    .center();//执行代码片段
  }
}

3 映射: 从代码片段中获取某个属性

1 #color(){
2   danger: red;
3   success: yellow
4 }
5 .wrapper{
6   position: relative;
7   height: 300px;
8    300px;
9   background: #color()[danger];
  }

4嵌套时候 &表示父级 >表示直接子元素

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

.a li.demo{

color: red

}

.a {
  li {
    &.demo {
      color: red
    }
  }
}

5 转义~: 字符串作为属性值或变量值时候, 要用转义;

6函数:

(1). if(condition, result1, result2)

 1 @some: foo;
 2 
 3 div {
 4     margin: if((2 > 1), 0, 3px);
 5     color:  if((iscolor(@some)), @some, black);
 6 }
 7 //Result:
 8 
 9 div {
10     margin: 0;
11     color:  black;
12 }

(2)darken(颜色, 百分百) lighten()

 1 // 颜色加深案例
 2 
 3 .color(){ //定义很多颜色主题
 4   red: #f40;
 5   green: green;
 6 }
 7 
 8 @color: .color()[red]; // 确定当前主题
 9 
10 div{
11   .size();
12   margin:10px;
13 }
14 .demo1{
15   background: @color;
16 }
17 .demo2{
18   background: darken(@color,10%); //不断加深
19 }
20 .demo3{
21   background: darken(@color,20%);//不断加深
22 }