LESS 嵌套语法详解及使用技巧

LESS 是一种 CSS 预处理器，可以让前端开发者使用类似编程语言的语法来编写样式。LESS 的嵌套语法使样式的层级结构更加清晰，减少了样式冲突的可能性，提高了代码的可读性和维护性。本文将详细介绍 LESS 的嵌套语法及其使用技巧。

基本语法

LESS 的嵌套语法通常使用 & 符号来表示当前选择器，比如：

.button {
  &.primary {
    color: #fff;
    background-color: blue;
  }
}

编译结果为：

.button.primary {
  color: #fff;
  background-color: blue;
}

在嵌套语法中，可以使用 > 符号来表示子选择器：

.container {
  > .item {
    margin-bottom: 20px;
  }
}

编译结果为：

.container > .item {
  margin-bottom: 20px;
}

& 符号还可以用来表示伪类或伪元素：

.button {
  &:hover {
    background-color: #eee;
  }
  &::before {
    content: "";
  }
}

编译结果为：

.button:hover {
  background-color: #eee;
}
.button::before {
  content: "";
}

除了以上介绍的基本语法，LESS 的嵌套语法还有很多高级用法，下面将一一介绍。

变量声明

LESS 的变量可以用来保存颜色、大小等样式属性的值，方便在样式中重复使用。在嵌套语法中，可以使用变量声明语法 @ 来定义变量，例如：

@color: #f00;

.button {
  color: @color;
}

编译结果为：

.button {
  color: #f00;
}

嵌套规则

在嵌套语法中，可以使用 & 符号来表示当前选择器。除此之外，还可以使用 &: 来表示当前选择器和伪类的组合，使用 &:: 来表示当前选择器和伪元素的组合。例如：

.button {
  &:hover {
    background-color: #ddd;
  }
  &::before {
    content: "";
  }
}

编译结果为：

.button:hover {
  background-color: #ddd;
}
.button::before {
  content: "";
}

属性嵌套

在嵌套语法中，可以将属性嵌套到选择器中，例如：

-- -------------------- ---- -------
------- -
  ----- -
    ----- -----
    ------- -----
  -
  ------- -
    ------ -----
    ------ ----
    ------ ------
  -
-

编译结果为：

.button {
  font-size: 14px;
  font-weight: bold;
  border-color: #999;
  border-width: 1px;
  border-style: solid;
}

选择器嵌套

在嵌套语法中，可以将选择器嵌套到属性中，例如：

.font {
  &-size {
    font-size: 14px;
  }
  &-family {
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
}

编译结果为：

.font-size {
  font-size: 14px;
}
.font-family {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

循环语句

在 LESS 中可以使用循环语句 for 生成多个选择器或属性，例如：

-- -------------------- ---- -------
------ ---

----- -
  ----- -
    --- -- ---- - -- ----- -
      ----------------- -
        ------------ ---- - ---
      -
    -
  -
-

编译结果为：

-- -------------------- ---- -------
----- ------------------ -
  ------------ -----
-
----- ------------------ -
  ------------ -----
-
----- ------------------ -
  ------------ -----
-
---

@extend 父类继承

在嵌套语法中，可以使用 @extend 父类继承来减少重复的样式代码，例如：

-- -------------------- ---- -------
----- -
  ------- --- ----- -----
  -------- ----
-

------- -
  ------- -
    ---------- -----
    ------- ------
  -
  ------- -
    ---------- -----
    ------- ------
  -
-

编译结果为：

-- -------------------- ---- -------
------ -------------- ------------- -
  ------- --- ----- -----
  -------- ----
-
------------- -
  ---------- -----
-
------------- -
  ---------- -----
-

总结

LESS 的嵌套语法使样式的层级结构更加清晰，减少了样式冲突的可能性，提高了代码的可读性和维护性。在使用嵌套语法时，应该注意选择器和属性的嵌套层数不要太深，以免导致代码难以理解和维护。同时，应该合理使用变量、嵌套规则、属性嵌套、循环语句和 @extend 父类继承等高级用法，从而更高效地编写样式代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1192283d39b488157418c