概述

Less（Leaner Style Sheets 的缩写）是 CSS 的一个向后兼容的语言扩展。这是 Less 语言和 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;
}

了解有关变量的更多信息

Mixins

Mixins 是一种将一个规则集中的属性包含（“混合”）到另一个规则集中的方法。假设我们有以下类：

.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作为混合。）

了解有关 Mixins 的更多信息

嵌套

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 的结构。

你也可以用这种方法将伪选择器和 mixin 绑定在一起。这是经典的 clearfix hack，改写为 mixin (&表示当前选择器父级):

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

输出：

.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或者命名空间选择器）。

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

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

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

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

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

地图

从 Less 3.5 开始，您还可以使用 mixins 和规则集作为值的映射。

#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 自定义属性类似，mixin 和变量的定义不必放在引用它们的行之前。因此，以下 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";

了解有关导入的更多信息

It's CSS, with just a little more.

概述

变量

Mixins

嵌套

嵌套规则和冒泡

运营

calc() 异常

逃脱

功能

命名空间和访问器

地图

范围

评论

输入