less语法 样式嵌套 & 符号使用

// ===== less 语法 =====
.menu-bar {
  // bar的样式部分
  &__nav {
    // nav的样式部分
    &:hover {
      // nav悬停时的样式部分
    }
  }
}

// ===== 对等转换成普通css =====
.menu-bar {
  /* bar的样式部分 */
}
.menu-bar__nav {
  /* nav的样式部分 */
}
.menu-bar__nav:hover {
  /* nav悬停时的样式部分 */
}

详细解释：
.menu-bar：这是一个父类选择器，表示 .menu-bar 元素的样式。
&__nav：& 代表 .menu-bar，所以 &__nav 就是 .menu-bar__nav，是一个基于 menu-bar 的 BEM（块、元素、修饰符）风格命名方式的子元素。

&:hover：& 此时代表 .menu-bar__nav，因此 &:hover 就是 .menu-bar__nav:hover，是对 .menu-bar__nav 元素在悬停状态下的样式。

 

注：

在less这种语法中，不建议嵌套过深，3层以内就差不多了。因为嵌套越深，浏览器解析长选择器的时间就越多，极大可能影响渲染性能，而且可读性也会变差，不利于后期维护。