Less中文文档

变量

当属性名、选择器或 URL 使用变量时需要用 {} 括起

  1. @width: 10px;
  2. @height: @width + 10px;
  3. @c: color;
  4. @w: #wrap;
  6. #header {
  7.   width: @width;
  8.   height: @height;
  9.   @{c}: #fff;
  10.   @{w} {
  11.     font-style: 14px;
  12.   }
  13. }

编译后

#header {
  width: 10px;
  height: 20px;
  color: #fff;
}
#header #wrap {
  font-style: 14px;
}

Less 中的变量是块级作用域，并且是延迟加载的

@var: 0;
.class {
    @var: 1;
  .brass {
       @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

编译后

.cass {
  one: 1;
}
.class .brass {
  three: 3;
}

混合

混合（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 中了

参数传递

当给 .bordered 加上括号时， .bordered 中的代码将不会编译到 .css 文件中，并且还可以传入对应的参数

.bordered(@tColor, @bColor) {
  border-top: dotted 1px @tColor;
  border-bottom: solid 2px @bColor;
}

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

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

编译后

#menu a {
  color: #111;
  border-top: dotted 1px #fff;
  border-bottom: solid 2px #000;
}
.post a {
  color: red;
  border-top: dotted 1px red;
  border-bottom: solid 2px pink;
}

默认参数

当不传递参数的时候会使用默认值

.bordered(@tColor:#fff, @bColor) {
  border-top: dotted 1px @tColor;
  border-bottom: solid 2px @bColor;
}

命名参数

当 Mixin 的形参有多个而你只想传一个时，可以使用命名参数的方式

.bordered(@tColor:#fff, @bColor) {
  border-top: dotted 1px @tColor;
  border-bottom: solid 2px @bColor;
}

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

匹配模式

mixin 的第一参数相当于一个匹配符，如果一个同名混合的匹配符是 @_ ，不管编译哪个同名混合都会将带 @_ 匹配符中的代码一同编译

注意：如果只是同名但形参的数量不相同，也不属于同一个混合，匹配符 @_ 的代码不会一同编译（默认参数不相同也不行，默认参数值值可以不相同）

.float(@_, @color) {
  background-color: pink;
}

.float(L, @color) {
  float: left;
  color: @color;
}

.float(R, @color) {
  float: right;
  color: @color;
}

#wrap1 {
  .float(L, green);
}

#wrap2 {
  .float(R, cyan);
}

编译后

#wrap1 {
  background-color: pink;
  float: left;
  color: green;
}
#wrap2 {
  background-color: pink;
  float: right;
  color: cyan;
}

@arguments

@arguments 变量可以拿到传过去的实参

.border(@1, @2, @3) {
  border: @arguments;
}

#wrap {
  .border(1px, solid, black);
}

编译后

#wrap {
  border: 1px solid black;
}

嵌套

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 的组织结构

你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix {
  display: block;
  zoom: 1;

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

运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

/* 所有操作数被转换成相同的单位 */
@conversion-1: 5cm + 10mm;                         /* 结果是 6cm */
@conversion-2: 2 - 3cm - 5mm;                 /* 结果是 -1.5cm  */

/* conversion is impossible */
@incompatible-units: 2 + 5px - 3cm;     /* 结果是 4px */

/* example with variables */
@base: 5%;
@filler: @base * 2;                                     /* 结果是 10% */
@other: @base + @filler;                             /* 结果是 15% */

乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm

你还可以对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

不过，Less 提供的 色彩函数 更有使用价值。

calc() 特例，为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // 结果是 calc(50% + (25vh - 20px))

继承

extend 是一个 Less 伪类，它将选择器与其引用的选择器合并

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

编译后

nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

all 关键词是一个扩展语法，它可以将所有有关的样式都继承

nav ul {
  &:extend(.inline all);
}
.inline {
  color: red;
}

.inline:hover {
  color: pink;
}

编译后

.inline,
nav ul {
  color: red;
}
.inline:hover,
nav ul:hover {
  color: pink;
}

注释

以 // 开头的注释，不会被编译到 CSS 文件中

以 /**/ 包裹的注释会被编译到 CSS 文件中

避免编译

.wrap {
     width: ~"calc(100px + 10px)"; 
}

编译后

.wrap {
  width: calc(100px + 10px);
}