Referencing parent selectors with the & operator

In the Writing more intuitive code and make inheritance clear with nested rules recipe in Chapter 1, Getting to Grips with the Basics of Less, you can read how to use nested style rules in Less. Inside nested rules, you can use the & sign to reference the current parent selector. In this recipe, you will learn how to use the & parent referencing sign. An important use case for the & parent referencing sign is the nested declaration of pseudo classes for a selector. Some well-known pseudo classes are :hover, :focus, and :link.

Getting ready

You can compile the Less code in this recipe with the command-line lessc compiler, as described in the Installing the lessc compiler with npm recipe in Chapter 1, Getting to Grips with the Basics of Less. Alternatively, you can include the file that has your Less code together with the less.js compiler into a button.html file and inspect the results in your browser. More information about how...