本章节说一下嵌套规则和函数

嵌套规则

在 Less 中，可以使用嵌套规则来编写更简洁和易读的样式代码。通过嵌套规则，可以将选择器和对应的样式规则组织在一起，以更清晰地表示它们之间的层次关系。以下是关于 Less 嵌套规则的详细说明：

基本嵌套

可以在父级选择器内部嵌套子选择器，并在子选择器中编写样式规则。例如：

.parent {  color: red;  .child {    font-size: 12px;    margin-top: 10px;  }}

在上面的示例中，.child 规则是 .parent 规则的子规则，当 .parent 元素应用样式时，.child 元素也会继承相应的样式。

伪类和伪元素嵌套

我们还可以在嵌套规则中使用伪类和伪元素选择器。例如：

.parent {  color: red;  &:hover {    color: blue;  }  &::after {    content: "▼";  }}

在上面的示例中，&:hover 表示在 .parent 元素被悬停时应用的样式，&::after 表示在 .parent 元素的后部插入内容。

嵌套属性：

我们可以在嵌套规则中嵌套属性。这在编写多个具有相同前缀的属性时非常有用。例如：

.box {  font: {    weight: bold;    size: 14px;  }  background: {    color: #f0f0f0;    image: url("bg.jpg");    repeat: no-repeat;  }}

在上面的示例中，font 和 background 是包含了子属性的嵌套属性，可以通过 font.weight 和 background.color 来访问其中的子属性。

需要注意的是，嵌套可以无限层级地嵌套，但为了代码易读性和维护性，建议不要嵌套超过 3 层。

父级选择器（&）基本用法

在 Less 中，使用父级选择器（&）引用嵌套规则中的父选择器。父级选择器可以在嵌套规则中引用父选择器的样式，并与其他选择器进行组合。以下是关于 Less 父级选择器的详细说明：

基本用法： 在嵌套规则中，使用 & 符号来表示父级选择器。例如：.parent { color: red; &:hover { color: blue; } &.active { font-weight: bold; } }在上面的示例中，&:hover 表示 .parent:hover，同时 &.active 表示 .parent.active，这样可以组合不同的选择器并应用样式。多层嵌套： 在多层嵌套中，& 符号将引用所有上层选择器。例如：.parent { color: red; .child { &:hover { color: blue; } &::after { content: "▼"; } } }在上面的示例中，&:hover 表示 .parent .child:hover，而 &::after 表示 .parent .child::after。嵌套属性中的父级选择器： 在嵌套规则中的嵌套属性中，您也可以使用父级选择器。例如：.box { font: { &-weight: bold; } background: { &-color: #f0f0f0; } }在上面的示例中，&-weight 表示 .box-weight，而 &-color 表示 .box-color。

通过使用父级选择器，可以更方便地引用父选择器的样式，并避免编写重复代码。

多个&

在 Less 中，使用多个父级选择器（&）可以在嵌套规则中生成复杂的选择器组合。多个 & 可以用于连接多个选择器，从而创建嵌套的复合选择器。以下是关于多个 & 的使用情况的说明：

需要注意的是 & 代表所有父选择器（不仅仅是最近的祖级）

在不同的嵌套层级中使用多个 &： 可以在不同的嵌套层级中使用多个 &。例如：

.link {  & + & {    color: red;  }  & & {    color: green;  }  && {    color: blue;  }  &, &ish {    color: cyan;  }}

在上面的示例中，会编译输出以下css样式：

.link + .link {  color: red;}.link .link {  color: green;}.link.link {  color: blue;}.link, .linkish {  color: cyan;}

多个 & 结合其他选择器： 多个 & 还可以与其他选择器结合使用。例如：

.parent {  & > .child,  & ~ .sibling {    color: red;  }}

在上面的示例中，.parent > .child 表示 .parent 元素的直接子元素带有 .child 类的元素，并将应用样式；而 .parent ~ .sibling 表示 .parent 元素之后具有 .sibling 类的兄弟元素，并将应用样式。

通过多个 & 的使用，可以创建更具有灵活性和复杂性的选择器组合，从而实现更精确的样式控制。

函数

Less中的函数有点Sass中的指令功能，通过它们我们可以完全各种复杂的场景，由于Less中提供的函数非常多，由于篇幅原因这里不再一一列举，感兴趣的同学可以去官网进行详细查阅。下面我们看一下几组常用的函数集。

条件逻辑函数if函数

在 Less 中，if 函数是用于在样式表中根据条件进行选择和应用样式的功能强大的函数。它允许您根据条件语句来选择不同的样式或值，并在编译过程中进行评估。以下是关于 Less 中 if 函数的详细介绍：

if 函数形式：

简单的 if-else 形式：if(@condition, @value1, @value2)如果 @condition 为真，则返回 @value1，否则返回 @value2。嵌套 if 形式：if(@condition1, @value1, if(@condition2, @value2, @value3))嵌套形式可以用于处理多个条件情况，根据不同条件返回不同的值。

以下是 if 函数的一个示例用法：

@width: 300px;.element {  width: if(@width > 400px, 400px, @width);}

在上面的示例中，如果 @width 大于 400px，则.element 元素的宽度将为 400px，否则将使用 @width 的原始值。

通过使用 if 函数，可以根据条件在编译时动态选择不同的样式值或属性，实现更具灵活性的样式控制和处理。

请注意，if 函数是在编译时处理的，而不是在运行时处理。因此，不能在 if 函数中使用 JavaScript 表达式或变量。

boolean 函数

boolean 函数用于判断某个逻辑是 true or false，常用在 if 函数的条件判断中。

boolean(condition)

看一个简单的例子

@test: boolean(10 > 5);.test-class {  color: if(@test, red, black);}

编译输出：

.test-class {  color: red;}

循环逻辑函数length

在 Less 中，length() 函数用于获取一个列表或字符串的长度（即元素的数量）。以下是 length() 函数的用法示例：

列表的长度：

@list: 1, 2, 3, 4, 5;.length-example {  width: if(length(@list) > 10, 10px, 20px);}

在上面的示例中，@list 是一个包含 5 个元素的列表，length(@list) 会返回列表的长度，即 5。

each

在 Less 中，each() 函数用于遍历列表或映射，并执行指定的操作。以下是 each() 函数的用法示例：

循环 list

@list: red, green, blue;each(@list, {  .color-@{value} {    color: @value;  // 分别输出列表中的每个颜色  }})

编译输出：

.color-red {  color: red;}.color-green {  color: green;}.color-blue {  color: blue;}

在上面的示例中，@list 是一个包含三个颜色的列表。each 会遍历 @list 中的每个元素，并将当前元素存储在 @value 变量中。然后，可以在遍历过程中执行任意的操作，比如输出每个颜色作为样式值。

循环 map

@map: {  one: red;  two: black;  three: white;  four: pink;}each(@map, {  .@{key}-@{index}{    color: @value;  }})

编译输出：

.one-1 {  color: red;}.two-2 {  color: black;}.three-3 {  color: white;}.four-4 {  color: pink;}

在上面的示例中，@map 是一个映射。each 会遍历 @map 中的每个元素，并将当前元素的key存储在 @key 变量中，把索引 index 存储在 @index变量中，把 值 存储在 @value 中， 然后，可以在遍历过程中执行任意的操作，比如输出每个颜色作为样式值。

注意： 与其它编程语言不一样的是 索引 index 是从下标 1 开始的，而不是 0

range

range 函数用于生成跨越一系列值的列表

// start - （可选）起始值，例如 1 或 1 像素// end - 最终值，例如 5px// step - （可选）增加的数量range(start, end, step)

用法也比较简单，结合上面的each 函数看一下简单的例子

// 从 1 是开始，直到 5 结束，每次增加 1@num: range(1, 5, 1);each(@num, {  .color-@{value} {    color: red  }})

编译输出：

.color-1 {  color: red;}.color-2 {  color: red;}.color-3 {  color: red;}.color-4 {  color: red;}.color-5 {  color: red;}

extract

extract 函数用于返回列表中指定位置的值

// list - 逗号或空格分隔的值列表。// index - 一个整数，指定要返回的列表元素的位置。extract(list, index);

简单用法：

@list: apple, pear, coconut, orange;@value: extract(@list, 4);.color{  color: @value;}

编译输出：

.color {  color: orange;}

其它函数

在 Less 中系统为我们提供了非常多的函数方便应付各种应用场景，由于函数较多，这里不再一一列举，只是简单的说几个比较常用的函数，更多的函数用法可以去官网进行查阅。

数学函数

在 Less 中，提供了一些有用的数学函数来执行各种数学计算。以下是一些常用的 Less 数学函数的示例：

percentage()：将数值转换为百分比。@width: 0.5; .element { width: percentage(@width); // 输出 50% }round()：四舍五入为最接近的整数。@number: 3.6; .element { width: round(@number); // 输出 4 }ceil()：向上取整。@number: 2.1; .element { width: ceil(@number); // 输出 3 }floor()：向下取整。@number: 4.9; .element { width: floor(@number); // 输出 4 }abs()：取绝对值。@number: -10; .element { width: abs(@number); // 输出 10 }

这些数学函数以及其他的数学函数，可以帮助您在 Less 中执行各种数值计算和转换。您可以根据具体的需求选择适当的函数进行使用。

类型函数

当使用 Less 编程时，可能会遇到需要判断和处理不同数据类型的情况。为了帮助您处理这些需求，Less 提供了一些内置的类型函数。以下是对常用的 Less 类型函数的详细说明：

iscolor(@value)：此函数用于检查传入的值是否为有效的颜色。如果值是一个颜色，函数返回 true，否则返回 false。

示例：

@color: #f00;@notColor: 123;.element {  hasColor: iscolor(@color); // 输出 true  hasNotColor: iscolor(@notColor); // 输出 false}

isnumber(@value)：此函数用于检查传入的值是否为数值。如果值是一个数值，函数返回 true，否则返回 false。

示例：

@number: 42;@notNumber: #f00;.element {  isNumber: isnumber(@number); // 输出 true  isNotNumber: isnumber(@notNumber); // 输出 false}

isstring(@value)：此函数用于检查传入的值是否为字符串。如果值是一个字符串，函数返回 true，否则返回 false。

示例：

@string: "Hello";@notString: 123;.element {  isString: isstring(@string); // 输出 true  isNotString: isstring(@notString); // 输出 false}

iskeyword(@value)：此函数用于检查传入的值是否为关键词。如果值是一个关键词，函数返回 true，否则返回 false。

示例：

@keyword: bold;@notKeyword: 123;.element {  isKeyword: iskeyword(@keyword); // 输出 true  isNotKeyword: iskeyword(@notKeyword); // 输出 false}

还有好几个类型判断函数，这里不一一列举。

颜色函数

在 Less 中，您可以使用颜色定义函数来创建自定义的颜色变量。这些函数可以帮助您在样式表中定义和管理不同颜色的变量。以下是几个常用的 Less 颜色定义函数：

rgb(@red, @green, @blue)：该函数用于定义一种 RGB 颜色。@red、@green 和 @blue 参数分别表示红、绿和蓝色的分量值，取值范围为 0 到 255。

示例：

@my-color: rgb(255, 0, 0); // 定义一个红色的颜色变量

rgba(@red, @green, @blue, @alpha)：该函数用于定义一种带有透明度的 RGB 颜色。@red、@green 和 @blue 参数分别表示红、绿和蓝色的分量值，取值范围为 0 到 255，而 @alpha 参数表示透明度，取值范围为 0.0 到 1.0。

示例：

@my-color: rgba(255, 0, 0, 0.5); // 定义一个半透明的红色的颜色变量

hsl(@hue, @saturation, @lightness)：该函数用于定义一种 HSL（色相、饱和度、亮度）颜色。@hue 参数表示色相值，取值范围为 0 到 360，@saturation 参数表示饱和度，取值范围为 0% 到 100%，@lightness 参数表示亮度，取值范围为 0% 到 100%。

示例：

@my-color: hsl(0, 100%, 50%); // 定义一个红色的颜色变量

hsla(@hue, @saturation, @lightness, @alpha)：该函数用于定义一种带有透明度的 HSL 颜色。@hue、@saturation 和 @lightness 参数与 hsl() 函数相同，@alpha 参数表示透明度，取值范围为 0.0 到 1.0。

示例：

@my-color: hsla(0, 100%, 50%, 0.5); // 定义一个半透明的红色的颜色变量

通过使用这些颜色定义函数，您可以轻松地创建和管理不同颜色的变量，并在样式表中随时使用。您还可以使用这些颜色变量进行其他颜色操作，如调整明暗、增加透明度等。

关于颜色相关的函数还有非常多，这里也不在一一列举，有兴趣的同学可以到less官网进行查阅。

继承

在Less中，继承是一种特性，用于在样式表中重用其他样式的定义。它允许你将一个选择器的样式应用到另一个选择器上，从而避免代码的重复编写，并提高样式表的可维护性。

通过使用extend关键字，你可以指定一个选择器来继承其样式。这个选择器可以是另一个类或ID选择器、标签选择器，也可以是伪类或伪元素。

例如，假设有以下两个样式定义：

.base-class {  color: red;}.child-class {  &:extend(.base-class);  font-size: 14px;}

在这个例子中，.child-class选择器使用extend继承.base-class选择器的样式。结果是，.child-class将继承.base-class中的颜色属性，并且可以添加自己的字体大小样式。

除了继承单一的选择器，还可以使用all关键字继承选择器的所有样式：

.base-class {  color: red;  font-size: 14px;}.child-class {  &:extend(.base-class all);  font-weight: bold;}

在这个例子中，.child-class选择器通过extend继承.base-class选择器的所有样式。结果是，.child-class将继承.base-class中的颜色和字体大小样式，并且可以添加自己的字体粗细样式。

当涉及到使用Less中的继承时，有几个常见的场景适合使用它：

定义基本样式：通过使用继承，你可以定义一个基本的样式类，其中包含一组通用的样式属性，然后在其他选择器中继承它们。这样做可以避免重复编写相同的样式，并提高代码的可维护性。

.base-class {  font-size: 14px;  font-weight: bold;  color: #333;}.child-class {  &:extend(.base-class);  // 添加其他样式}

在这个例子中，.child-class继承了.base-class的样式，包括字体大小、字体粗细以及颜色。

修改继承样式：通过继承样式，你可以对其进行修改或覆盖。这在需要针对特定情况微调基本样式时很有用。

.base-class {  font-size: 14px;  font-weight: bold;}.child-class {  &:extend(.base-class);  font-weight: normal; // 覆盖基本样式中的字体粗细  color: red; // 添加新的样式}

在这个例子中，.child-class继承了.base-class中的所有样式，但是重新定义了字体粗细（使用font-weight: normal）。此外，还添加了自己的颜色样式。

重用通用样式：当你有一组选择器共享某些通用样式时，可以使用继承来减少冗余代码。

.link {  color: blue;  text-decoration: underline;}.button {  &:extend(.link);  padding: 10px;  background-color: #ccc;}

在这个例子中，.button选择器继承了.link选择器的样式，包括颜色和文本装饰。然后，.button选择器添加了自己的样式，如内边距和背景颜色。

继承是一种强大的功能，可以使我们的样式表更具可维护性和可重用性。但请注意不要滥用继承，过度使用继承可能会导致样式堆叠和选择器的不必要复杂性，影响代码的可读性和性能。