less

1. 变量在作用域范围内的取值

@detached-ruleset: {
  caller-variable: @caller-variable; // variable is undefined here
  .caller-mixin(); // mixin is undefined here
};

selector {
  // use detached ruleset
  @detached-ruleset(); 

  // define variable and mixin needed inside the detached ruleset
  @caller-variable: value;
  .caller-mixin() {
    variable: declaration;
  }
}

selector { caller-variable: value; variable: declaration; }

@variable: global;
@detached-ruleset: {
  // will use global variable, because it is accessible
  // from detached-ruleset definition
  variable: @variable; 
};

selector {
  @detached-ruleset();  // 后面加（），返回 属性：属性值；
  @variable: value; // variable defined in caller - will be ignored
}

selector { variable: global; }

2. 

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
// 匹配任何值
.mixin(@_; @color) {
  display: block;
}

@switch: light;

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

.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) }

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

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

// 与
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
// 或
.mixin (@a) when (@a > 10), (@a < -10) { ... }
// 非
.mixin (@b) when not (@b > 0) { ... }

 

3. 导入指令

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a less file
@import "foo.css";  // statement left in place, as-is