Managing CSS3 Vendor Prefixes with Mixins

There’s an important best practice of software and Web development called DRY that all developers should follow. For those of you who are unfamiliar with the term, DRY stands for “Don’t Repeat Yourself”. Not limited to software code, CSS stylesheets can also benefit tremendously from DRY. The problem is that it’s not always easy to implement using pure CSS. That’s where Mixins come in. They offer the capability to define reusable code snippets that can be interspersed throughout your stylesheets. At release time, the Mixins-enhanced code is compiled into pure CSS. In today’s article, we’ll be learning the basics of Mixins syntax as well as how to use them in your stylesheets.

Applying DRY Without Mixins

Mixins are not essential to apply the DRY principle to your CSS code. Perhaps the most basic implementation of DRY in CSS is selector grouping. It allows you to combine selectors so that you can apply the same rule to multiple elements:

.clear:before {
        display:table;
        text-transform:uppercase;
}
.clear:after {
        display:table;
        text-transform:uppercase;
}
.wrapper:before {
        display:table;
        text-transform:uppercase;
}
.wrapper:after {
        display:table;
        text-transform:uppercase;
}

…may be grouped into one rule:

.clear:before, .clear:after, .wrapper:before, .wrapper:after {
        display:table;
        text-transform:uppercase;
}

That is a lot more succinct and efficient, but sadly, selector grouping can only take you so far. Once your rules get a bit more complex, you quickly hit a wall. Take the following set of rules:

#btnToggleLanguageMobile {
  font-size: 1.1em;
  line-height: 1em;
  width: 96%;
  box-shadow: 2px 2px 10px 0 #444444; 
}

#btnRequestMenuMobile {
  font-size: 1.1em;
  line-height: 1em;
  width: 50%;
  box-shadow: 2px 2px 10px 0 #444444; 
}

They are almost identical, except for the width attribute of 96% vs. 50%.

While not suitable for selector grouping, we can still follow the DRY principle by assigning all of the overlapping attributes into a class:

#btnToggleLanguageMobile {
  width: 96%;
}

#btnRequestMenuMobile {
  width: 50%;
}

.mobileButton {
  font-size: 1.1em;
  line-height: 1em;
  box-shadow: 2px 2px 10px 0 #444444; 
}

Now you need to add the new class to your elements in the HTML markup:

<input id="btnToggleLanguageMobile" class="btnToggleLanguageMobile" type="button" value="Switch language"  />

<input id="btnRequestMenuMobile" class="btnToggleLanguageMobile" type="button" value="Request menu"  />

CSS Mixins Via Sass

Sass, which stands for Syntactically Awesome StyleSheets, has been around for over seven years now so they were in a really good place to tackle CSS3 vendor extensions when they hit the scene. It’s an extension of CSS that adds some muscle and order to the sometimes convoluted basic CSS language. It makes use of external libraries, such as the Compass style library, applications, and Frameworks to pack some serious wallop.

The Sass syntax is not terribly different from what we just saw above except that it doesn’t require the maintaining of classes in our HTML markup. Instead, it takes CSS written for Sass and compiles it to pure CSS syntax. Thus, the above example could be rewritten as:

=mobileButton {
  font-size: 1.1em;
  line-height: 1em;
  box-shadow: 2px 2px 10px 0 #444444; 
}

#btnToggleLanguageMobile {
  width: 96%;
  +mobileButton
}

#btnRequestMenuMobile {
  width: 50%;
  +mobileButton
}

Now you can see why they are called “mixins”. The reusable code “classes” are mixed into other rules using the plus sign.

Variables In Sass

Our code “classes” can be made even more versatile by representing the values using variables. In the following variation of our main example, the width is defined as an input parameter that can be passed to the code “class”. Sass variables also support default values so that you can reuse the code without input parameters:

=mobileButton(!width=50%) {
  font-size: 1.1em;
  line-height: 1em;
  box-shadow: 2px 2px 10px 0 #444444; 
  width: !width
}

#btnToggleLanguageMobile {
  +mobileButton(96%)
  font-weight: bold;
}

#btnRequestMenuMobile {
  +mobileButton
  color: black;
}

Frameworks

Although Sass can be run directly from the command prompt without any additional bells or whistles, or within several frameworks have been built on top of Sass; two of the biggest are Compass and Bourbon. There are also quite a few GUI apps that use Sass under the covers. Most cost money, but there are a couple of free ones:

• CodeKit – Mac, $$$
• Hammer – Mac, $$$
• Koala – Windows and Mac, $$$
• LiveReload – Windows and Mac, $$$ (Source code available for free)
• Mixture – Windows and Mac, $$$
• Prepros Pro – Windows and Mac, $$$
• Prepros – Windows and Mac, Chrome extension, Free
• Scout – Windows and Mac, Free

Compass also comes in a GUI app called (surprise!) Compass.app. It’s a mere ten bucks, thirty percent of which goes to the United Mitochondrial Disease Foundation (UMDF). I’m a sucker for a good cause!

Conclusion

In today’s article, we learned the basics of Mixins syntax as well as how to use them in your CSS code. Next time, we’ll get into how to use a Framework application to leverage the capabilities of Sass Mixins.