LESS 是一种 CSS 预处理器，它拓展了 CSS 的语法，增加了许多有用的特性，使得 CSS 编写更加灵活和高效。在 LESS 中，"&" 符号是一个十分强大的语法元素，经常用于在样式表中定义嵌套规则和伪类样式等，其用法和技巧如下。
嵌套规则
在 LESS 中，可以使用 "&" 符号将样式规则嵌套在另一个样式规则中。这样可以避免嵌套层级过多，让 CSS 样式表更加简洁和易于维护。
示例代码
-- -------------------- ---- ------- ------- - ----------------- -------- ------ - ------ ----- - ------- - ----------------- -------- - -展开代码
在上面的示例代码中，".child" 样式规则被嵌套在 ".parent" 样式规则中，其编译后的 CSS 代码如下。
-- -------------------- ---- ------- ------- - ----------------- -------- - ------- ------ - ------ ----- - ------------- - ----------------- -------- -展开代码
伪类样式
在 CSS 中，伪类样式通常被用于设置元素的状态和行为，比如鼠标悬停、点击等。在 LESS 中，可以使用 "&" 符号将伪类样式嵌套在样式规则中，以实现更加精细的样式控制。
示例代码
-- -------------------- ---- ------- ---- - ----------------- -------- ------ ----- ------- ----- -------- ----- -------- ------------- ----------- ------- -------------- ---- ------- - ----------------- -------- - -------- - ----------------- -------- - ------- - -------- ----- ----------- - - - ------ -------- ---- ---- ----- - -展开代码
在上面的示例代码中，".btn" 样式规则定义了一个基本的按钮样式，而 "&:hover"、"&:active" 和 "&:focus" 则分别表示鼠标悬停、鼠标点击和按钮聚焦状态下的的样式。其编译后的 CSS 代码如下。
-- -------------------- ---- ------- ---- - ----------------- -------- ------ ----- ------- ----- -------- ----- -------- ------------- ----------- ------- -------------- ---- - ---------- - ----------------- -------- - ----------- - ----------------- -------- - ---------- - -------- ----- ----------- - - - ------ -------- ---- ---- ----- -展开代码
总结
"&" 符号是 LESS 中一个非常有用的语法元素，它可以使得样式表的编写更加简洁和灵活，同时也可以实现更加细致和精确的样式控制。需要注意的是，在使用 "&" 符号时，应该掌握好其用法和限制，避免产生不必要的嵌套和重复定义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653341da7d4982a6eb6c3027
