概述

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

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

  • 有关Less语言功能的详细文档，请参阅特征
  • 有关较少内置功能的列表，请参阅功能
  • 有关详细的使用说明，请参阅使用Less.js
  • 有关Less的第三方工具，请参见工具

Less为CSS添加了什么？下面是功能的快速概述。

变量

这些都是非常自我解释的：

@宽度： 10像素;@高度： @宽度+10像素;#收割台{宽度:@宽度;高度:@高度;}

输出：

#收割台{宽度:10像素;高度:20像素;}

了解有关变量的更多信息

混合物

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

.有边框{边界顶部：虚线1像素黑色；边界-底部：固体2像素黑色；}

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

#菜单 一{颜色:#111;.有边框();}.帖子 一{颜色：红色；.有边框();}

的属性.有边框类现在将出现在两个#菜单a和.发布。（请注意，您还可以使用#身份证作为混合物。）

了解有关Mixin的更多信息

嵌套

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

#收割台{颜色：黑色；}#收割台 .导航{字体大小:12像素;}#收割台 .徽标{宽度:300像素;}

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

#收割台{颜色：黑色；.导航{字体大小:12像素;}.徽标{宽度:300像素;}}

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

您还可以使用此方法将伪选择器与mixin捆绑在一起。这是经典的clearfix黑客，改写为mixin(&表示当前选择器父项）：

.清除修复{显示：块；缩放:1;&：之后{内容:" ";显示：块；字体大小:0;高度:0;清楚的：两者都有；可见性：隐藏；}}

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

嵌套规则和气泡

At-rules例如@媒体或@支架可以使用与选择器相同的方式嵌套。at规则位于顶部，并且相对于同一规则集中其他元素的相对顺序保持不变。这叫做冒泡。

.组件{宽度:300像素;@媒体（最小宽度：768像素) {宽度:600像素;@媒体（最小分辨率：192dpi) {背景-图像：url(/img/视网膜2x.png);}}@媒体（最小宽度：1280像素) {宽度:800像素;}}

输出：

.组件{宽度:300像素;}@媒体（最小宽度：768像素) {.组件{宽度:600像素;}}@媒体（最小宽度：768像素)和（最小分辨率：192dpi) {.组件{背景-图像：url(/img/视网膜2x.png);}}@媒体（最小宽度：1280像素) {.组件{宽度:800像素;}}

操作

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

//数字被转换成相同的单位
@转换-1： 5厘米+10毫米;//结果是6厘米
@转换-2： 2-3厘米-5毫米;//结果为-1.5cm

//转换是不可能的
@不兼容的单元： 2+5像素-3厘米;//结果是4px

//变量示例
@底座： 5%;@填料： @底座*2;//结果是10%
@其他： @底座+@填料;//结果是15%

乘法和除法不能转换数字。在大多数情况下，这是没有意义的——长度乘以长度会得到一个面积，而css不支持指定面积。Less将按原样处理数字，并为结果指定明确的单位类型。

@底座： 2厘米*3毫米;//结果是6厘米

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

@颜色：(#224488/2);//结果是#1112244
背景色:#112244+#111;//结果是#223355

然而，您可能会发现Less的颜色函数更有用。

从4.0开始，使用/操作员。

@颜色： #222/2;//结果为`#222/2`，而不是#111
背景色: (#FFFFFF公司/16);//结果是#1010

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

calc（）异常

已发布3.0.0版

为了与CSS兼容，计算（）不计算数学表达式，但将计算变量以及嵌套函数中的数学。

@var（变量）： 50伏/小时/2;宽度:计算(50%+ (@无功功率，无功功率-20像素));//结果是计算值（50%+（25vh-20px））

逃逸

转义允许您使用任意字符串作为属性或变量值。里面有什么~“任何东西”或~“一切”按原样使用，除插值.

@最小768： ~“（最小宽度：768px）”;.元素{@媒体 @最小768{字体大小:1.2雷姆;}}

结果如下：

@媒体（最小宽度：768像素) {.元素{字体大小:1.2雷姆;}}

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

@最小768：（最小宽度：768像素);.元素{@媒体 @最小768{字体大小:1.2雷姆;}}

在3.5+版本中，许多之前需要“报价-转帐”的情况是不需要的。

功能

Less提供了多种函数，用于变换颜色、操作字符串和进行数学运算。它们在函数引用.

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

@底座： #电话04615;@宽度： 0.5;.class类{宽度:百分比(@宽度);//返回`50%`
  颜色:浸透(@底座,5%);背景色:旋转(减轻(@底座,25%),8);}

参见：函数参考

命名空间和访问器

（不要混淆CSS公司@命名空间或命名空间选择器).

有时，出于组织目的，您可能希望对mixin进行分组，或者只是为了提供一些封装。你可以在Less中直观地做到这一点。假设您想将一些mixin和变量绑定到#束，供以后重用或分发：

#束() {.按钮{显示：块；边境:1像素纯黑色；背景色：灰色；&：悬停{背景色：白色；}}.tab标签{ ... }.引用{ ... }}

现在如果我们想混合.按钮我们的班级#标题a，我们可以做到：

#收割台 一{颜色：橙色；#束.按钮();//也可以写为#bundle>.button}

注：追加()到您的命名空间（例如。#捆绑（）)如果您不希望它出现在CSS输出中，即。#bundle.tab包.

地图

从Less3.5开始，您还可以使用mixin和规则集作为值的映射。

#颜色() {初级的：蓝色；第二的：绿色；}.按钮{颜色：#颜色[原色]；边境:1像素纯色#colors[次]；}

正如预期的那样，该输出：

.按钮{颜色：蓝色；边境:1像素纯绿色；}

另请参见：地图

范围

Less中的Scope与CSS非常相似。变量和mixin首先在本地查找，如果找不到，则从“父”范围继承。

@var（变量）：红色；#第页{@var（变量）：白色；#收割台{颜色:@无功功率，无功功率;//白色}}

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

@var（变量）：红色；#第页{#收割台{颜色:@无功功率，无功功率;//白色}@var（变量）：白色；}

另请参见：懒惰加载

评论

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

/*一个方块*风格评论*/
@var（变量）：红色；//排队！
@var（变量）：白色；

正在导入

导入的效果与预期相当。您可以导入.更少文件中的所有变量都将可用。可以为指定扩展名更少文件夹。

@导入 “库”;//无图书馆
@导入 “输入.css”;

了解有关导入的更多信息