概述

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 hack，重写为混入（& 代表当前选择器父级）：

.clearfix {
  display: block;
  zoom: 1;

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

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

嵌套的 @ 规则和冒泡

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

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

操作

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

// 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 将按原样对数字进行运算，并将明确声明的单位类型分配给结果。

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

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

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

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

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

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

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

calc() 异常

发布于 v3.0.0

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

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

转义

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

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

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

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `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();  // can also be written as #bundle > .button
}

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

映射

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

另见：延迟加载

注释

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

/* One heck of a block
 * style comment! */
@var: red;

// Get in line!
@var: white;

导入

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

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

了解有关导入的更多信息

它是 CSS，只是多了一点东西。

概述

变量

混入

嵌套

嵌套的 @ 规则和冒泡

操作

calc() 异常

转义

函数

命名空间和访问器

映射

作用域

注释

导入