如何使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 nesting。

使用extend：

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