【Cheat Sheet】Less

一、Variables

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

二、Mixins

带参

#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;

  width: @size;
  height: @size;
}

#small-circle{
  #circle
}

#big-circle{
  #circle(100px)
}

不带参

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

三、Nesting

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
    &:hover{
    	color:red;
    }
  }
}

不带&的css翻译完成之后为 ul li，带有&的用css翻译完成之后为li:hover。

四、Scope

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

一层一层往上找，直到找到变量。

五、Functions

each

Input1:

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});

this will outputs:

.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

Inout2:

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

This will output:

.set {
  one-1: blue;
  two-2: green;
  three-3: red;
}