CODEWITHSUNDEEP
cssless
Adam
Adam

Reputation: 23

LESS Nested Selector isn't Working

relatively new to LESS so this might be something I'm doing wrong...

Currently using LESS to create stylesheets and preprocessing to CSS using Grunt and the grunt-contrib-less plugin.

Hitting a bit of a brick wall here though.

My LESS selector is:

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

But it's being processed to:

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

Note the space between the tag and the class, this is causing it not to work.

Am I misunderstanding something about the nested selector or is something awry with the Grunt processing?

Upvotes: 0

Views: 365

Answers (1)

Jeff
Jeff

Reputation: 12163

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

should do what you want, assuming you want the final output to be h1.navbar-brand.

The & is the "self" selector. I use it often with :hover, like

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

Upvotes: 1

Related Questions