如何使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) {}
}