如何使LESS结合CSS规则和逗号

Question

例如：

.icon-pinterest{
    color:#CC2027;
    background: #fff;
    &:hover{
        color:#CC2027;
        background: #fff;
    }
}

这将生成：

.icon-pinterest {
  color: #cc2027;
  background: #fff;
}

.icon-pinterest:hover {
  color: #cc2027;
  background: #fff;
}

但我想要以下内容：

.icon-pinterest,
.icon-pinterest:hover {
  color: #cc2027;
  background: #fff;
}

我想也许我可以使用扩展表达式？

Answer 1

这是不可能的，因为乍一看似乎并没有那么明智（例如，将鼠标悬停在默认样式已经相同的元素上），并且在某些罕见情况下，使用默认CSS语法仍然可以实现需要它。 所以您只需使用

.icon-pinterest,
.icon-pinterest:hover {
  color: #cc2027;
  background: #fff;
}

Answer 2

以防万一，当然可以使用extend ，但这没有任何意义，因为它在其本机CSS格式中已经足够完善（请参阅@David Mulder答案）。 请始终记住，Less仍然是CSS，不要为了嵌套而使用Less嵌套。

使用extend ：

.icon-pinterest {
    color: #CC2027;
    background: #fff;
    &:hover:extend(.icon-pinterest) {}
}