css – LESS:扩展先前定义的嵌套选择器

前端之家收集整理的这篇文章主要介绍了css – LESS:扩展先前定义的嵌套选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在尝试像疯子一样让下面的LESS声明起作用,但现在我担心它不会发生:/所以我现在转向你们这些人最后寻求帮助!

我有以下声明:

  1. .top{
  2. &-first{
  3. background:black;
  4. &-item{
  5. color:white;
  6. }
  7. }
  8. &-second{
  9. background:green;
  10. &-item:extend(.top-first-item){}
  11. }
  12. }

我希望得到以下输出

  1. .top-first {
  2. background: black;
  3. }
  4. .top-first-item,.top-second-item{
  5. color: white;
  6. }
  7. .top-second {
  8. background: green;
  9. }

但不幸的是,它没有编译,但相反:

  1. .top-first {
  2. background: black;
  3. }
  4. .top-first-item{
  5. color: white;
  6. }
  7. .top-second {
  8. background: green;
  9. }

解决方法

LESS目前不支持扩展“连接名称”选择器(基本上,.top& -first& -item被解释为三个不同的选择器元素,并且从未通过扩展寻找单个选择器找到).

针对您的特定案例的解决方法

  1. .top {
  2. &-first {
  3. background: black;
  4. }
  5.  
  6. &-second {
  7. background: green;
  8. }
  9.  
  10. &-first,&-second {
  11. &-item {
  12. color: white;
  13. }
  14. }
  15. }

猜你在找的CSS相关文章