Less（Leaner Style Sheets 的缩写）是一种向后兼容的 CSS 语言扩展。这是 Less 语言和 Less.js 的官方文档，Less.js 是将 Less 样式转换为 CSS 样式的 JavaScript 工具。

因为 Less 看起来就像 CSS，所以学习起来很容易。Less 只对 CSS 语言做了一些方便的补充，这也是它可以学得这么快的原因之一。

• 有关 Less 语言特性的详细文档，请参阅 特性
• 有关 Less 内置函数的列表，请参阅 函数
• 有关详细使用说明，请参阅 使用 Less.js
• 有关 Less 的第三方工具，请参阅 工具

Less 给 CSS 增加了什么？以下是功能的快速概述。

变量

这些相当不言自明：

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

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

输出：

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

了解更多关于变量的信息

混合器

混入是一种将一组属性从一个规则集中包含（"混合进入"）到另一个规则集中的方法。所以说我们有以下类：

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

我们希望在其他规则集中使用这些属性。好吧，我们只需要放入我们想要属性的类的名称，如下所示：

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

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

.bordered 类的属性现在将同时出现在 #menu a 和 .post a 中。（注意，你也可以使用 #ids 作为混合器。）

了解更多关于混合器的信息

嵌套

Less 使你能够使用嵌套代替级联，或与级联结合使用。假设我们有以下 CSS：

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

在 Less 中，我们也可以这样写：

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

生成的代码更加简洁，并且模拟了 HTML 的结构。

您还可以使用此方法将伪选择器与混合器捆绑在一起。这里是经典的 clearfix 技巧，被重写为一个混合器（& 代表当前的选择器父级）：

.clearfix {
  display: block;
  zoom: 1;

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

了解更多关于父选择器的信息

嵌套的 At 规则和冒泡

诸如 @media 或 @supports 之类的 at 规则可以以与选择器相同的方式嵌套。at 规则被放置在顶部，相对于同一规则集内的其他元素的顺序保持不变。这被称为冒泡。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

输出：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

运算

算术运算 +、-、*、/ 可以对任何数字、颜色或变量进行操作。如果可能，数学运算会考虑单位并在加、减或比较数字之前转换它们。结果具有最左边明确声明的单位类型。如果转换不可能或没有意义，则忽略单位。不可能转换的例子：px 到 cm 或 rad 到 %。

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

// 转换不可能
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// 带变量的例子
@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 的颜色函数更有用。

从 4.0 版本开始，使用 / 运算符在括号外不执行除法。

@color: #222 / 2; // 结果是 `#222 / 2`，而不是 #111
background-color: (#FFFFFF / 16); // 结果是 #101010

如果你想让它始终工作，可以更改 Math 设置，但不推荐。

calc() 例外

在 v3.0.0 中发布

为了兼容 CSS，calc() 不会计算数学表达式，但会计算变量和嵌套函数中的数学运算。

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

转义

转义允许你使用任意字符串作为属性或变量值。~"任何内容" 或 ~'任何内容' 中的任何内容都会原样使用，除了插值外不会有任何更改。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

结果是：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

注意，从 Less 3.5 开始，你可以简单地写：

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

在 3.5+ 版本中，许多以前需要"引号转义"的情况不再需要。

函数

Less 提供了各种函数，用于转换颜色、操作字符串和进行数学运算。它们在函数参考中有完整的文档。

使用它们相当简单。下面的例子使用 percentage 将 0.5 转换为 50%，将基色的饱和度增加 5%，然后将背景色设置为一个亮度增加 25% 并旋转 8 度的颜色：

@base: #f04615;
@width: 0.5;

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

参见：函数参考

命名空间和访问器

（不要与 CSS @namespace 或 命名空间选择器 混淆）。

有时，你可能想要出于组织目的或仅仅是为了提供一些封装而对混合器进行分组。你可以在 Less 中相当直观地做到这一点。假设你想在 #bundle 下捆绑一些混合器和变量，以便以后重用或分发：

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

现在，如果我们想在 #header a 中混入 .button 类，我们可以这样做：

#header a {
  color: orange;
  #bundle.button();  // 也可以写成 #bundle > .button
}

注意：如果你不希望命名空间出现在 CSS 输出中，请在命名空间后附加 () （例如 #bundle()），即 #bundle .tab。

映射

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

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

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

这会输出，如预期的那样：

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

另见：映射

作用域

Less 中的作用域与 CSS 非常相似。变量和混合器首先在本地查找，如果没有找到，则从"父"作用域继承。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

与 CSS 自定义属性一样，混合器和变量定义不必放在引用它们的行之前。因此，以下 Less 代码与前面的示例相同：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

另见：延迟加载

注释

块样式和内联注释都可以使用：

/* 一个非常棒的块
 * 样式注释！ */
@var: red;

// 排队！
@var: white;

导入

导入的工作方式与预期基本相同。你可以导入 .less 文件，其中的所有变量都将可用。.less 文件的扩展名是可选的。

@import "library"; // library.less
@import "typo.css";

了解更多关于导入的信息