less实用语法

一. 变量

@ 10px;
@height: @width + 10px;//带单位的加减, 以运算符左边单位为主

#header {
   @width;
  height: @height;
}
编译为
#header {
   10px;
  height: 20px;
}

二. 代码片段(混合) 

.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 映射: 从代码片段中获取某个属性

#color(){
  danger: red;
  success: yellow
}
.wrapper{
  position: relative;
  height: 300px;
   300px;
  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)

@some: foo;

div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}
//Result:

div {
    margin: 0;
    color:  black;
}

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

// 颜色加深案例

.color(){ //定义很多颜色主题
  red: #f40;
  green: green;
}

@color: .color()[red]; // 确定当前主题

div{
  .size();
  margin:10px;
}
.demo1{
  background: @color;
}
.demo2{
  background: darken(@color,10%); //不断加深
}
.demo3{
  background: darken(@color,20%);//不断加深
}