Check if parent has class using LESS

Question

Example scenario: I would like to hide a sub-navigation menu if the user has javascript enabled so that it can be revealed on a click of a navigation link further up in the nav hierarchy. Modernizr adds a class 'js' to the html tag if javascript is enabled so I can use that for detection.

In SASS I can do something like this:

div.subnav{

   display: block;

   html.js & {
      display: none;
   }

}

Can this be done using LESS? Can I target a parent from within another rule?

Solution

Can this be done using LESS?

Yes.

The code you provided works in LESS. The & combinator works the same.

In the end, the selectors generated for:

div.subnav {
    ...
    html.js & {
        ...
    }
}

will be:

div.subnav {
    ...
}

html.js div.subnav {
    ...
}

Comments

[cimmanon]

Did you try it?

[Mike Chamberlain]

This is one of the greatest things I've ever seen.

[stravanato]

Great tip, LESS is huge and it's not always easy to find the right instruction.