css - 尝试用 LESS 实现 CSS 代码

Question

我想用 LESS 生成这段 CSS 代码:

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

但目前我正在使用 LESS 生成这段 CSS 代码:

.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;
}