css - 在 less 中悬停和活动状态

Question

您可以在 [less] 中与悬停状态在同一行添加一个活动状态，还是必须将其嵌套在单独的行上？

例子：

标准少

nav {
    color:@black;
    display:block;
    &:hover {color:@primary-color;}
    &:active {color:@primary-color;}    
}

以某种方式做到这一点

nav {
    color:@black;
    display:block;
    &:hover, &:active {color:@primary-color;}    
}

我试过了：[&:hover, &:active;] 我试过了：[&:hover; &:active;] 但它似乎不起作用。

Answer 1

实际上是的，您可以，只要您定义@primary-color变量，您提供的第二个变体就是正确的：

@primary-color: #f00;
@black: #000;

nav {
  color: @black;
  display:block;
  &:hover, &:active {color:@primary-color;}    
}

将产生：

nav {
  color: #000000;
  display: block;
}
nav:hover,
nav:active {
  color: #ff0000;
}

Answer 2

很晚了，我的愚蠢告诉我去睡觉。

Juicy Scripter赢了，我输了，因为后面的编码错误。

但是，是的，

nav {
  color: @black;
  display:block;
  &:hover, &:active {color:@primary-color;}    
}

是答案。