less中父级选择器的使用

2019年12月9日 • ... • ☕️ 1 min read

写样式常常用到父级选择器，在less中用&表示。最常用的是给某个元素添加伪类（:hover等），减少要书写的代码量：

a {
  color: blue;
  &:hover {
    color: green;
  }
}

生成

a {
  color: blue;
}

a:hover {
  color: green;
}

特别要注意是，&代表该层的所有嵌套父级。比如

.a {
  .b {
    .c {
      &:hover {
        background: #ddd;
      }
      & & {
        background: #eee;
      }
      &ish {
        background: #fff;
      }
    }
  }
}

会生成

.a .b .c:hover {
  background: #ddd;
}

.a .b .c .a .b .c {
  background: #eee;
}

.a .b .cish {
  background: #fff;
}

还可以通过把&放在选择器末尾，来改变选择选择器顺序，比如需要给某个嵌套多层的元素单独设置样式，但是又不想把嵌套重新写一遍，就可以单独加个&来达到目的。

.a {
  .b{
    .c {
      .styled&{
        background: #ddd;
      }
    }
  }
}

.styled.a .b .c {
  background: #ddd;
}