css - 尝试用LESS实现CSS代码

我想用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;
                }
            }
        }
    }
}

最佳答案

它应该是：

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