Currently, Less accepts only simple selectors as a mixin. In this recipe, you will see how the :extend()
pseudo class can be used to mix the nested or child selectors. Using the :extend()
pseudo class as a mixin will have the same style effect, but the compiled CSS code will be different. The :extend()
pseudo class merges selectors, and mixins add copy or property to the selector.
In this recipe, you will only compile a small piece of Less code. You can use the command-line lessc
compiler, as described in the Installing the lessc compiler with npm in Chapter 1, Getting to Grips with the Basics of Less.
Write some Less code that styles a
button
element inside anav
element, and save this code in thenav.less
file. You can use the following code to do this:nav { button { border: 1px solid: white; background-color: red; color: white; } }
To apply the same style rules on another button element, you can use the...