努力实现以较少的

Question

我要生成这个CSS代码CSS代码LESS：

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .navbar-nav > .active > a:hover { 
    background-color: blue !important; 
} 

，但目前我生成这个CSS代码LESS：

.navbar-default .navbar-nav > .active > a { 
    background-color: blue !important; 
} 
.navbar-default .navbar-nav > .active > a:focus { 
    background-color: blue !important; 
} 
.navbar-default .navbar-nav > .active > a:hover { 
    background-color: blue !important; 
} 

这里是我的LESS代码：

.navbar-default { 
//& always refers to the current selector. 
    .navbar-nav { 
     & >.active { 
      & > a { 
       background-color: blue !important; 

       &:focus { 
        background-color: blue !important; 
       } 
       &:hover { 
        background-color: blue !important; 
       } 
      } 
     } 
    } 
} 

Answer 1

它应该是：

.navbar-default { 
    .navbar-nav { 
     & >.active { 
      & > a { 
       &, &:focus, &:hover { 
        background-color: blue !important; 
       } 
      } 
     } 
    } 
} 

你可以把它简化为这一点，虽然：

.navbar-default .navbar-nav >.active > a { 
    &, &:focus, &:hover { 
    background-color: blue !important; 
    } 
} 

这两者将输出以下内容：

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .navbar-nav > .active > a:hover { 
    background-color: blue !important; 
}