Back in January, I introduced the wonderful world of preprocessors. I covered the basics, but now let’s get a little sassy with mixins and extends.
So let’s stir things up a little bit and see what else Sass, SCSS and LESS can do! Let’s create a new menu for the sidebar. We want it to have the same properties as our first menu, but also have a pattern, rounded corners, different colored list items, and subsequently different colored hover states for those list items.
Whew! That border radius was a lot of work. Imagine if you had multiple elements on your site that had rounded corners. That’s where
mixins come in! A
mixin is similar to the
$ variable declarations, only instead of declaring just one, you can declare a set of rules and properties which can then be included in other classes.
mixin is introduced with the equals sign (
=) followed by a set of rules. In this case, it’s the border radii for multiple browsers. This
mixin is then called under
#menu-sidebar using a plus sign (
In this example,
@extend takes all the variables from
#menu and applies it to
#menu-sidebar, including the nested elements.
With SCSS, the structure is exactly the same, only instead of using math symbols,
@include are used respectively to reserve the plus and equals signs strictly for mathematical equations.
Again, LESS is similar to SCSS, but the
mixins are written as
ids, which in turn can be included in other
ids. These rulesets can also behave like functions and take arguments, in case you want to change a variable in one instance.
#menu-footer, we want the rounded corners to be
10px, so we include the
.rounded-corners ruleset but give it different parameters (the same can be done in SCSS with an
THE CSS OUTPUT
When all is said and done, the final output of the above preprocessing languages become:
@extend, the three sidebars share the same style elements, and all other elements that are exclusive to
#menu-footer are declared individually.
Which preprocessing language do you use? Which one would you think about trying if you’ve never used a preprocessor before?