less中父级选择器的使用

December 9, 2019 ... ☕️ 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;
}

#css#less

SideEffect is a blog for front-end web development.
Code by Axiu / rss