LESS 中的 & 符号用法详解-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种动态样式表语言，它扩展了 CSS，并向其添加了动态特性。LESS 通过使用嵌套、变量、混合、函数等功能，使 CSS 更有可读性、可维护性和可重用性。其中，& 符号也是 LESS 中一个重要的符号，在 LESS 中的使用熟练度，取决于你在什么上面使用 & 符号。本文将详细探讨 & 符号在 LESS 中的用法，包括其用途、语法和示例代码，以及在编写代码时应该注意的事项和建议。

& 符号的用途

& 符号在 LESS 中的使用范围较广，其主要用途分为以下两个方面：

1. 父元素引用

LESS 允许我们嵌套 CSS 规则，这使得代码更具有可读性和可维护性。在嵌套规则中的 & 符号，可以让我们引用其父元素。在嵌套规则中，& 符号代表的是父元素。

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

以上代码中，当 li 元素带有 active 类名时，颜色和背景色将设置为白色和黑色。

2. 选择器嵌套

LESS 同时允许我们嵌套选择器，这使得我们可以更轻松地对目标元素进行样式设置。在选择器嵌套规则中，& 符号代表的是其前面的选择器。

.btn {
  &-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
}

以上代码中，& 符号代表 .btn，.btn-primary 将继承 .btn 的所有样式。

& 符号的语法

& 符号的语法较为简单，只需要注意以下两点：

1. & 符号必须嵌套在规则中

& 符号必须在规则中使用，例如：

.nav {
  &-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
}

如果将 & 符号单独使用，将会出现错误，例如：

&-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

以上代码无法被 LESS 解析。

2. & 符号可以与多个选择器结合使用

& 符号还可以和多个选择器结合使用，例如：

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

在上述代码中，& 符号与多个选择器结合使用，其中，__ 是一个 BEM 命名规范中的格式。

示例代码

其实，& 符号的用法与复杂程度是可以高到非常高的。但是，为了方便大家理解，下面是简单几个示例代码，供大家参考：

示例代码一

 li {
    &.active {
        color: #fff;
        background-color: #333;
    }
}

在这个例子中， & 符号引用的是 li 元素，当带有 active 类名的 li 元素出现时，其文本颜色为白色，背景颜色为黑色。

示例代码二

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

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

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

在这个例子中， & 符号引用的是 a 元素，当鼠标移动到 a 元素上时，其文本颜色变为 #555。

示例代码三

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

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

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

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

在这个例子中， & 符号引用的是 .btn-primary，当鼠标悬停在 .btn-primary 上方时，其背景颜色和边框颜色会发生变化。

注意事项和建议

在使用 LESS 中的 & 符号时，需要注意以下几点：

熟练掌握 & 符号的使用语法
不要滥用 & 符号，否则会让代码过于复杂、难以维护
尽量在 LESS 中使用 & 符号所带来的可重用性和可读性特性
将模块分离，分别编写不同的模块，并尽可能地保持模块独立，这样有利于减少代码冗余

结论

& 符号在 LESS 中是一种非常有用的工具，它可以让你编写出更好的代码，提高代码的可读性和可维护性。只需要熟练掌握 & 符号的使用方法和注意事项，你就可以将它们用于各种场景中，并创建出更好的 CSS 样式表。

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