css - LESS 嵌套选择器不起作用

Question

LESS 相对较新，所以这可能是我做错了什么......

目前使用 LESS 创建样式表并使用 Grunt 和 grunt-contrib-less 插件对 CSS 进行预处理。

虽然这里有点碰壁。

我的 LESS 选择器是:

h1{
    .navbar-brand {
    font-family: @bodyfont;
    display: inline;
    margin: 0px;
    }
}

但它正在被处理为:

h1 .navbar-brand {
font-family: 'Museo';
display: inline;
margin: 0px;
}

注意标签和类之间的空格，这会导致它不起作用。

我是对嵌套选择器有什么误解还是 Grunt 处理出了问题？

Answer 1

h1{
    &.navbar-brand {
    font-family: @bodyfont;
    display: inline;
    margin: 0px;
    }
}

应该做你想做的，假设你希望最终输出是 h1.navbar-brand。

& 是“self”选择器。我经常将它与 :hover 一起使用，比如

a {
  ..
  &:hover {
    ..
  }
}