如何嵌套Less类来继承父类样式？

Question

更少的代码。

.btn-default:hover {
    background-color: rgba(217, 217, 217, 0.65);
    background-clip: content-box;

    .btn-default:focus {
        outline: 2px solid #047a9c;
    }
}

我在这里要做的是 btn-default:focus 悬停状态应该有背景色，但只有焦点状态应该有轮廓，所以输出的CSS应该是。

 .btn-default:hover {
     background-color: rgba(217, 217, 217, 0.65);
     background-clip: content-box;
 }

 .btn-default:focus {
     background-color: rgba(217, 217, 217, 0.65);
     background-clip: content-box;
     outline: 2px solid #047a9c;
 }

我对LESS嵌套的部分有点迷茫，是不是可以用LESS嵌套？这样我就不用重复代码了。

Answer 1

你必须将伪类只嵌套到主选择器中。在这种情况下，你必须将伪类只嵌套到主选择器中。.btn-default.

这就是它应该的样子。

.btn-default {
  /* some code here */

  &:hover, &:focus {
    background-color: rgba(217, 217, 217, 0.65);
    background-clip: content-box;
  }

  &:focus {
    outline: 2px solid #047a9c;
  }
}

这个... & 字符具有 "此 "字的功能。

从你原来的问题。

.btn-default:hover {
  background-color: rgba(217, 217, 217, 0.65);
  background-clip: content-box;

  .btn-default:focus {
    outline: 2px solid #047a9c;
  }
}

"少 "不是这样的 试着念一下你的代码。你的代码在CSS中是这样的。

.btn-default:hover {
  background-color: rgba(217, 217, 217, 0.65);
  background-clip: content-box;
}

.btn-default:hover.btn-default:focus {
    outline: 2px solid #047a9c;
}

你必须将伪类和伪元素嵌套到主选择器中(.btn-default)

如果你想让更多的选择器、伪元素或伪类具有相同的属性，你应该使用 ,不要把一个嵌在另一个里面。

---

这里有一些有用的链接。

少到CSS编译器

更少的CSS嵌套类

伪类