To Sass Or Not To Sass: Thoughts On Preprocessors

As with almost all subjects, there are plenty of opinions about CSS preprocessors. And if the internet is good for anything, it’s posting your opinions.

Over the past few years, my opinions of preprocessors have fluctuated between “Whoa this is awesome!” to “They’re good, but…”. I currently sit somewhere in the middle where I feel that they’re a good tool that, like most tools, can be misused.

So what defines misuse? I would posit that the main example of misuse is excessively nested selectors. Nesting selectors is supposed to make CSS easier to read and maintain. In certain situations, it will make things simpler. But in most cases it won’t.

The main problem of nesting is that it often creates a high level of specificity that is difficult, if not impossible, to override without further increasing specificity. It also becomes tightly coupled to the structure of the HTML, making the rule fragile. And finally, the nested rule is generally not reusable, causing stylesheet bloat.

This is not to say that nesting is always bad. I often use it for styling pseudo-classes of elements. However, using the reference selector in Sass (&) can be confusing to some people who are not as familiar with your code, and the insertion of a single space will generate very different CSS output.

In addition to limited nesting, I also use preprocessor variables for a variety of functions. For example, it’s much easier to remember and type $brand-primary-color instead of #72b24c.

The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page. […] The magical end result is that all the text on your page lines up across all the columns, creating a harmonious vertical rhythm. – Wilson Minor for alistapart.com

Additionally, variables can be used to help set baseline grids. All you have to do is set the base value (6px, for example), and use math to calculate line-heights along with margins and padding. For example, margins at the end of paragraphs can be set at 30px ($baseline-height * 5), and line-heights at 24px at 18, 24, 30 or 36px depending on the text size, and all will follow the baseline grid.

Another area where preprocessors can excel is in their support of mixins. I really like vendor prefix mixins for simplifying my stylesheets. They allow me to come back, at some point down the road when the property is properly supported, and remove the prefixed rule from the mixin. When I do that, all instances of that rule will be removed from the compiled stylesheet file.

Mixins are also great for defining breakpoints. They allow me to know only the arbitrary size names of the breakpoints in a project, rather than their specific dimension. This helps to ensure I won’t cross-contaminate breakpoints from other projects. I can also massage the breakpoints in a single location for the entire stylesheet without having to do the ‘Find and Replace’ dance.

TL;DR

I use preprocessors, but not to their fullest capability. I try to use the features judiciously and in ways that simplify my code and ensure consistency within my project.