Part 2

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.

GETTING SASSY

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.

CSS:

Sass:
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 extends and mixins come in! A mixin is similar to the !, @ and $ 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.

A 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.

SCSS:
With SCSS, the structure is exactly the same, only instead of using math symbols, @mixin and @include are used respectively to reserve the plus and equals signs strictly for mathematical equations.

LESS:
Again, LESS is similar to SCSS, but the mixins are written as classes and ids, which in turn can be included in other classes and ids. These rulesets can also behave like functions and take arguments, in case you want to change a variable in one instance.

In #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 @include)

THE CSS OUTPUT

When all is said and done, the final output of the above preprocessing languages become:

With the @extend, the three sidebars share the same style elements, and all other elements that are exclusive to #menu-sidebar and #menu-footer are declared individually.

VISUAL OUTPUT

#menu
#menu

#menu-sidebar
menu-sidebar

#menu-footer
menu-footer

Which preprocessing language do you use? Which one would you think about trying if you’ve never used a preprocessor before?