Less语法

1、变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

2、混合

.bordered {
  border-top: 1px solid #ccc;
}
.box {
  .bordered();
}

3、嵌套

.box {
    width: 100px;
    .bordered();
}

3、运算符

+、-、*、/

@width: 10px;
@height: 20px;
@total: @width + @height;
.box {
  width: @total;
}

4、函数

.box {
  width: percentage(@width); // returns `50%`
}