less

[chenyinkai]

变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

css： #header { color: #6c94be; }

混合 .bordered{ border-bottom: 1px solid #ccc; } //定义class //调用class

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

带参数的混合

.border-radius (@radius) {   //参数也可设置默认值 @radius: 5px
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}

模式匹配 有以下设置：

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

根据 @switch 的值来匹配不同的样式：

@switch: light;

.class {
  .mixin(@switch, #888);
}

css输出：

.class {
  color: #a2a2a2;
  display: block;
}

引导 根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

css输出：

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

嵌套

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

运算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

@var: 1px + 5; //6px;

border: (@width * 2) solid black;

http://www.bootcss.com/p/lesscss/#docs