SASS, CoffeeScript, LESS, jsmake, IcedCoffeeScrpt, HAML, Jade, Slim, Eco…
What are all of these things? They’re all scripts or programs designed to change how you write webpages. They take one aspect of the development process (CSS, HTML, or Javascript) and change the syntax to something that’s theoretically easier to read and faster to develop.
Take this bit of javascript:
$(function(){
alert("Hello World!");
})();
You could rewrite it in CoffeeScript as:
$ ->
alert "Hello World!"
false
When you save your CoffeeScript file, a program on your computer runs and translates that back into javascript (or even jQuery as in our example above). If you can acclimate yourself to the syntax, you’re left with a working file that’s much easier on the eyes than native javascript.
Let’s take a look at SASS, my new best friend. Say you’re working on a sweet new responsive website and you’re having problems keeping tabs on your font sizes. You might be writing CSS that looks something like:
h2{
font-size: 1.5em;
}
Your boss takes a look at the development server and says, “No, no, no, I want this font to POP! Make it bigger!” Ok, easy. Now, what does 1.5em mean in this context? If the parent container has a font-size set, there’s no guarantee that it’s actually 24px. (1em in most browsers is 16px) You could leave yourself a comment, and then spend the time to update your comment with the new information… or you could get SASSy.
h2{
font-size: (24em/16);
}
The only tricky thing here is that you’ll want to include the unit measurement on the first number. If you put it on both it will disappear entirely.
Even cooler than being able to do math in CSS? Using variables. Imagine being able to put away the find/replace and change a color value in one place. Making that light urple more urple has never been easier.
$urple: #2E0854;
h2{
font-size:(24em/16);
color: $urple;
}
You might be intimidated to try some of these tools straight out of the box as they rely on you knowing your way around a command-line, but a new application called Code Kit makes it incredibly easy to incorporate these preprocessors into your workflow.