“Preprocessor” may not be the most common word in your vocabulary, but if you’re a developer, it’s a good one to know.
The concept of a preprocessor can be intriguing to some and confusing to others, and while some coders swear by them, others have done their best to avoid using them at all costs.
But if you fall in the latter category, you may be missing out on a great tool that could really simplify your life. Here’s why…
What Are Preprocessors?
Preprocessors are programs that take one type of data and convert it to another type of data, usually HTML or CSS.
CSS preprocessors in particular are written for the sole purpose of adding new features without breaking browser compatibility.
There are plenty of reasons why this would be helpful. Chris Loos over at Urban Insights names a few:
- It adds the stuff that should have been in CSS in the first place
- It will make your CSS “DRY” (Don’t Repeat Yourself)
- It will save you time
- It will make your code easier to maintain
- It will make your CSS more organized
If that sounds like something you want, then you’re primed to use a preprocessor. The next step is figuring out exactly which one to use.
So how do you choose?
Here is a breakdown of the top options for both CSS and HTML.
For the most part, the choice of preprocessor falls to personal preference, but there are a few pros and cons for each option.
SASS stands for Syntactically Awesome Style Sheets and was originally designed and created by Hampton Catlin.
SASS allows you to dynamically manipulate CSS using variables, mixins, inheritance, and nesting rules. It essentially helps you write less code and speed up your workflow. Many popular frameworks are built with SASS.
It has two syntaxes:
- SCSS, which stands for “Sassy CSS”
- Traditional (indented) SASS
Why use SASS? For one, you should use SASS if you love working with Ruby. You might also like using it if you prefer an older style of syntax and hate curly brackets and semicolons, as SASS uses indentations to delimit blocks of style and line breaks instead of semicolons to separate statements.
If you’re still not sure which to use between the two, the folks over at CSS Tricks have a comparison article, found here.
Source: No Sleep for Sheep
With CSS preprocessors, you have more choices than just SASS or LESS. If you’re picky, you also have Stylus – another popular option – and a few others to choose from like CSS-Crush, Myth, and Rework.
- CSS-Crush – Another great option, this preprocessor is written in PHP with classic syntax.
- Myth – Myth is a new CSS preprocessor that uses natural CSS syntax and acts as sort of a CSS polyfill for future standards.
If you’re looking for more obscure options, you can try any of the following:
- Clay – A CSS preprocessor created using Haskell
- DtCSS – A PHP script that parses DtCSS syntax into CSS
- Switch CSS: A CSS preprocessor that runs on Apache
If you prefer to leave CSS alone, you can also use preprocessors with HTML. While there are fewer options to choose from, the choices available are still helpful in getting your coding done faster.
Haml, also known as HTML abstraction markup language, is a language designed to help you create beautiful (and functioning) markups. Some coders love it, others hate it. Again, it’s about personal preference.
It works by turning code written in Haml into HTML. It promotes DRY coding and is highly structured, making it perfect for coders who want a little more formatting. Haml does require Ruby to be compiled to HTML, so the first step to using it is to ensure that Ruby is installed
Why use Haml? If you’re okay working with Ruby and you want an easy-to-read, easy-to-learn tool, Haml is the perfect choice. It also borrows some CSS syntax, so if you’re more familiar with CSS but you still want to create markups, it can help with that.
A few of the basic features include adding simple tags, adding attributes to those tags, and creating blocks of text.
The only downside is that browsers won’t render Jade directly, though there are different tools available for different platforms that can preprocess Jade to HTML, including:
Why use Jade? If you need a simple way to do mockups and you’ve been using regular HTML up to this point (and don’t want to bother learning Ruby), Jade is a good choice.
While you don’t absolutely need to use preprocessors to compile your code, they certainly can help move thing along faster.
Preprocessors are designed to help you create structured, organized code that is easier to maintain and will save you time in the long run, which is helpful for every coder.
If you’re a fan of CSS, check out a few of the top options, like SASS, LESS, or even Stylus. If you’re more into HTML, there are a couple options that can help you out, including Haml and Jade.
If you’re having trouble choosing between them, try a few out and see how they work for you. Using a preprocessor is all about convenience, so you get to decide which one works best for you.