Sass, Less, Stylus, CoffeeScript, TypeScript, Dart, Haml, Slim, Jade… The list goes on and on. What are Preprocessing languages, and why should we use them?
The basic building blocks of any website are HTML, CSS, and JavaScript. HTML is the structure of the page, the bones, where the content goes. This is the one language that you can’t build a web page without. CSS is the design of the page. CSS is how you tell this part to be red, and that part to be blue and that part to be over there. JavaScript is the behavior of a page, if you want something to do something, click on this to move the next slide, you’ll need JavaScript.
So if you’ve got HTML, CSS, and JavaScript why do you need any of these other languages? The short answer is you don’t, you can code the best website in the world with these languages, but you can code the best website in faster and easier with a Preprocessor.
Each of the Preprocessor languages I mentioned above compiles into HTML, CSS, or JavaScript *, but they give the coder tools to make the job easier. When writing HTML you have to open and close every tag that you create.
<p>These are paragraph tags </p>
When you write a language like Haml, you would write
%p Here is some paragraph text.
And that’s it. While this is a simple example, you can image when you are coding thousands of lines that it really starts to add up.
CSS has come a long way since version one, but there are still something that the language is missing. The most popular CSS Preprocessors add this functionality in. Some of these abilities are variables, nesting, functions, and doing mathematical calculations.
In CSS if you want some text to be blue you can set its hex color value to a shade of blue.
.textclass {color:#0066FF;}
In Sass you could set this to a variable.
$darkblue: #0066FF;
.textclass {color:$darkblue;}
When the Sass is compiled it returns CSS, but replaces the $darkblue with the value given to it. While this doesn’t seem like much in this example, think of hunting down the correct color code for your class, or changing your mind halfway through a project and hunting down every instance of #0066FF.
Preprocessed languages by definition need to be processed into their web friendly languages before they will work in your browser. That is why you will need a preprocessing compiler on your computer. Different languages need different compilers, but some programs can handle multiple languages. You can also use the Ruby language to make your own compiler, though this is a little more difficult than a plug and play Windows or Mac App. Here is a quick list of a few Compilers.
- Codekit (This is the one I use)
- Less.app
- Scout
- Fire.app
- Prepros (Updated)
When you first start with a Preprocessor it might seem like it slows down your workflow, you know how to write HTML, CSS, and JavaScript already, but once you start using their shortcodes, minification, and orginization features you’ll be glad you took the time to learn them. If you are looking for a good place to get your feet wet, try Sass or Less, two excellent CSS Preprocessing languages, and they use the same syntactic as regular CSS so they don’t feel so foreign as Haml does.
* Dart can be compiled into JavaScript but it can also be run as straight Dart code in Google’s Chrome.