less

一门css预处理语言

less本身兼容css，less中可以正常编写css

变量

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

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

编译成css

#header {
  width: 10px;
  height: 20px;
}

混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。（注意，你也可以使用 #ids 作为 mixin 使用。）

(混入也可以传递参数)

嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

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

用 Less 语言我们可以这样书写代码：

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

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

你还可以使用此方法将伪选择器与混入打包在一起。 这是经典的 clearfix hack，重写为混入（& 代表当前选择器父级）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

相当于

.clearfix {
  display: block;
  zoom: 1;

}
 .clearfix:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }

运算

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

映射

从 Less 3.5 开始，你还可以使用混入和规则集作为值映射。

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

如预期的那样输出：

.button {
  color: blue;
  border: 1px solid green;
}