概述

Less（代表精简样式表）是 CSS 的向后兼容语言扩展。这是 Less 的官方文档，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;
}

详细了解变量

混合

混合是一种将一组属性从一个规则集“混合”到另一个规则集中的方法。因此，假设我们有以下类

.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 用作 mixin。）

详细了解 Mixin

嵌套

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

详细了解父选择器

嵌套 At 规则和冒泡

At 规则（如 @media 或 @supports）可以与选择器以相同的方式嵌套。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 到 %。

// 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()），即 #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;
}

另请参阅：延迟加载

注释

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

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

// Get in line!
@var: white;

导入

导入的工作方式几乎符合预期。您可以导入一个 .less 文件，其中所有的变量都可用。对于 .less 文件，可以选择指定扩展名。

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

了解有关导入的更多信息

它就是 CSS，只不过多了一点点。

概述

变量

混合

嵌套

嵌套 At 规则和冒泡

运算

calc() 异常

转义

函数

命名空间和访问器

映射

范围

注释

导入