css - 相同样式的多个类和伪类更少？

Question

如何在 LESS 代码中简化下面的 css？

.push-nav > .active > a,
.push-nav > .active > a:hover,
.push-nav > .active > a:focus {
    background:#000;
    color: #fff;
}

我的尝试:

.push-nav > .active > a {
    &:focus,
    &:hover {
        background:#000;
        color: #fff;
    }
}

结果:

.push-nav > .active > a:focus,
.push-nav > .active > a:hover {
  background: #000;
  color: #fff;
}

.push-nav > .active > a 丢失。

有什么想法吗？

Answer 1

.push-nav > .active > a 丢失，因为您没有包含它。

& 符号 & 代表当前选择器。

添加:

.push-nav > .active > a {
    &,
    &:focus,
    &:hover {
        background: #00;
        color: #fff;
    }
}

在你的代码中 & = .push-nav > .active > a。所以 &:focus = .push-nav > .active > a:focus。