less基础写法

1.值变量

当前less全局变量和选择器局部变量，存在变量提升，声明靠前，赋值

@nice-blue: #5B83AD;
#header {
  color: @light-blue;
}

路径变量名：

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

2.mixins

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

浏览器显示：

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

3.嵌套写法

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

选择器：用&，
（无其他嵌套属性）&指当前选择器
（有嵌套属性）&指当前选择器包含的所有样式，包含嵌套属性

.clearfix {
  display: block;
  zoom: 1;
/* & 指当前.clearfix */
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

4.值变量计算

@base: 5%;
@filler: @base * 2;
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

5.函数

@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

6.选择器名变量：

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

选择器名部分变量

@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

选择器变量和值变量结合：

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;
//渲染结果 @var是fnord,@@var则为@fnord的值
content: "I am fnord.";