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

¥Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.

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

¥Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.

• 有关 Less 语言特性的详细文档，请参阅 特性

  ¥For detailed documentation on Less language features, see Features

• 有关 Less 内置函数的列表，请参阅 函数

  ¥For a list of Less Built-in functions, see Functions

• 详细使用说明，请参阅 使用 Less.js

  ¥For detailed usage instructions, see Using Less.js

• Less 的第三方工具，请参阅 工具

  ¥For third-party tools for Less, see Tools

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

¥What does Less add to CSS? Here's a quick overview of features.

变量

¥Variables

这些都是不言自明的：

¥These are pretty self-explanatory:

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

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

输出：

¥Outputs:

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

了解有关变量的更多信息

¥Learn More About Variables

混入

¥Mixins

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

¥Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. So say we have the following class:

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

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

¥And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:

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

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

.bordered 类的属性现在将出现在 #menu a 和 .post a 中。（请注意，你也可以将 #ids 用作混入。）

¥The properties of the .bordered class will now appear in both #menu a and .post a. (Note that you can also use #ids as mixins.)

了解有关混合的更多信息

¥Learn More About Mixins

嵌套

¥Nesting

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

¥Less gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:

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

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

¥In Less, we can also write it this way:

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

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

¥The resulting code is more concise, and mimics the structure of your HTML.

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

¥You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (& represents the current selector parent):

.clearfix {
  display: block;
  zoom: 1;

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

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

¥Learn More About Parent Selectors

嵌套的 @ 规则和冒泡

¥Nested At-Rules and Bubbling

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

¥At-rules such as @media or @supports can be nested in the same way as selectors. The at-rule is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.

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

输出：

¥outputs:

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

操作

¥Operations

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

¥Arithmetical operations +, -, *, / can operate on any number, color or variable. If it is possible, mathematical operations take units into account and convert numbers before adding, subtracting or comparing them. The result has leftmost explicitly stated unit type. If the conversion is impossible or not meaningful, units are ignored. Example of impossible conversion: px to cm or rad to %.

// 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%

乘法和除法不转换数字。大多数情况下没有意义 - 长度乘以长度得出面积，而 css 不支持指定面积。Less 将按原样对数字进行运算，并将明确声明的单位类型分配给结果。

¥Multiplication and division do not convert numbers. It would not be meaningful in most cases - a length multiplied by a length gives an area and css does not support specifying areas. Less will operate on numbers as they are and assign explicitly stated unit type to the result.

@base: 2cm * 3mm; // result is 6cm

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

¥You can also do arithmetic on colors:

@color: (#224488 / 2); // result is #112244
background-color: #112244 + #111; // result is #223355

但是，你可能会发现 Less 的 颜色函数 更有用。

¥However, you may find Less's Color Functions more useful.

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

¥From 4.0, No division is performed outside of parens using / operator.

@color: #222 / 2; // results in `#222 / 2`, not #111
background-color: (#FFFFFF / 16); //results is #101010

你可以改变 数学 设置，如果你想让它一直有效，但不推荐。

¥You can change Math setting, if you want to make it always work, but not recommended.

calc() 异常

¥calc() exception

发布于 v3.0.0

¥Released v3.0.0

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

¥For CSS compatibility, calc() does not evaluate math expressions, but will evaluate variables and math in nested functions.

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

转义

¥Escaping

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

¥Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.

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

结果是：

¥results in:

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

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

¥Note, as of Less 3.5, you can simply write:

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

在 3.5+ 中，许多以前需要 "引号转义" 的案例不再需要了。

¥In 3.5+, many cases previously requiring "quote-escaping" are not needed.

函数

¥Functions

Less 提供了许多函数，可以转换颜色、操作字符串和进行数学运算。它们在 函数参考手册 中有完整的记录。

¥Less provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.

使用它们非常简单。以下示例使用百分比将 0.5 转换为 50%，将基色的饱和度增加 5%，然后将背景颜色设置为亮 25% 并旋转 8 度的颜色：

¥Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:

@base: #f04615;
@width: 0.5;

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

查阅：函数参考

¥See: Function Reference

命名空间和访问器

¥Namespaces and Accessors

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

¥(Not to be confused with CSS @namespace or namespace selectors).

有时，出于组织目的或只是为了提供一些封装，你可能希望对混入进行分组。你可以在 Less 中非常直观地做到这一点。假设你想在 #bundle 下打包一些混入和变量，以供以后重用或分发：

¥Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less. Say you want to bundle some mixins and variables under #bundle, for later reuse or distributing:

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

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

¥Now if we want to mixin the .button class in our #header a, we can do:

#header a {
  color: orange;
  #bundle.button();  // can also be written as #bundle > .button
}

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

¥Note: append () to your namespace (e.g. #bundle()) if you don't want it to appear in your CSS output i.e. #bundle .tab.

映射

¥Maps

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

¥As of Less 3.5, you can also use mixins and rulesets as maps of values.

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

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

如预期的那样输出：

¥This outputs, as expected:

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

也可以看看：映射

¥See also: Maps

作用域

¥Scope

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

¥Scope in Less is very similar to that of CSS. Variables and mixins are first looked for locally, and if they aren't found, it's inherited from the "parent" scope.

@var: red;

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

与 CSS 自定义属性一样，混入和变量定义不必放在引用它们的行之前。所以下面的 Less 代码与前面的例子是一样的：

¥Like CSS custom properties, mixin and variable definitions do not have to be placed before a line where they are referenced. So the following Less code is identical to the previous example:

@var: red;

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

也可以看看：延迟加载

¥See also: Lazy Loading

注释

¥Comments

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

¥Both block-style and inline comments may be used:

/* One heck of a block

 * style comment! */
@var: red;

// Get in line!
@var: white;

导入

¥Importing

导入工作与预期的差不多。你可以导入一个 .less 文件，其中的所有变量都将可用。可选地为 .less 文件指定扩展名。

¥Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for .less files.

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

了解有关导入的更多信息

¥Learn More About Imports