CSS Preprocessors: Focused Decisions

CSS is, intentionally, a simple language. With the rise of the complex webapp, the front-end developer specialization, and an increasing feature set, that simplicity is quickly dissipating. For the uninitiated, CSS preprocessors (namely Sass, LESS, and Stylus) enhance your stylesheet writing capabilities through functionality additions like variables, nesting, and mixins—allowing far greater command over large amounts of style.

There's no shortage of articles written in the past few years advocating the use of a preprocessor or providing a quick tutorial. Rather than rehash the same points, let's focus on an oft-overlooked benefit and look at a number of non-command-line methods that offer the terminal-adverse an alternative.

• 

• The (Optional) Intro

  No preprocessor article is complete without a general overview for those unfamiliar with the concept. If you feel like you've heard this one before, skip ahead to The Real Benefit.

  As mentioned in the opening, things like Sass, LESS, and Stylus afford us extra functionality on top of CSS, but the files written in these languages need to be compiled into CSS before a browser can make sense of them. Generally, the compiling process is automated to negate any workflow impact.

  Common benefits you can expect from integrating one of these preprocessors include:

  • Conciseness: Each preprocessor has time-saving conventions built-in through removing, or making optional, various bits of punctuation. Depending on your preference, your styles could be brace, semicolon, and/or colon-free. Additionally, all support the means to nest selectors.
  • Added Functionality: To varying degrees, these languages offer added abilities for shaping our stylesheets; this includes mixins (chunks of reusable code that optionally take arguments), extends (class inheritance), and variable support.
  • Add-ons: to expand your base toolkit even further, preprocessor add-ons are a popular choice. Sass has Compass, Stylus has Nib, and, though it's more orange than apple, the ever-popular Bootstrap is built with LESS.

• The Real Benefit

  In practice, the greatest benefit of preprocessors tends to be reduced effort—not physical effort (typing less), but mental effort. These stylesheet-enhancers effectively allow you to offload some of the tedious thinking and app-switching that is inherent to front-end development. Have a commonly-used color value? Store it as a variable rather than hunting for it or committing it to memory. Need to alter that color in a predictable, maintainable manner? Sass has a ridiculous amount of color operations that do just that, saving a trip to the nearest color-picker.

  Through preprocessor implementation, you're able to focus directly on writing styles. Responsive arithmetic can be performed in the stylesheet without switching to a calculator. Compass can take care of sprites for you. Separating your styles into modular files and importing them without a performance hit is seamless.

  The primary takeaway is this: these languages keep your attention on solving implementation problems, rather than on distractions from tools or workflows.

• Painless Compiling

  Determining whether or not a CSS preprocessor is a good idea isn't usually the largest barrier to entry—users tend to drop off when asked to download packages via the command line or to set up watch expressions. Fortunately, it's easy to avoid these issues if the terminal just isn't your thing.

• 

  In-Browser

  Not entirely convinced? Try out one of these setup-free, browser-based implementations:

  • CodePen - Sass + LESS
  • jsFiddle - Sass
  • Try Stylus! - Stylus
• 

  Apps

  On board, but looking for a GUI to handle your preprocessing? Here are a few options to get you started:

  • Codekit - $25, Mac - Sass/LESS/Stylus
  • Fire.app - $14, Mac/Win/Linux - Sass
  • LiveReload - $10, Mac + Win (alpha) - Sass/LESS/Stylus
  • Compass.app - $10, Mac/Win/Linux - Sass

• Making a Choice

  The communities surrounding each preprocessor tend to be pretty evangelical about their respective choice. All said, though, each is remarkably similar. To help find the one best suited to your project, take a look at Chris Coyier's Sass vs. LESS and Johnathan Croom's Sass vs. LESS vs. Stylus: Preprocessor Shootout.

• Assembling Sass Giveaway!! Win 5 free online Sass courses from Code School (NOW CLOSED)

  Take part for the chance to win one of 5 free access codes for Code School's Assembling Sass course. Just share this tweet:

  Tweet