You might be just getting in to web design and hearing the words "CSS Preprocessor" an awful lot. You're probably wondering what they are and what they can do for you. Or even if they're different than CSS. What you really need to know is using CSS preprocessors can make your life so much easier. However, if you're still learning CSS, it's best to not jump into preprocessors just yet. Once you completely understand CSS and everything it can do, then you should start playing around with some preprocessors. The reason for this is unless you understand what CSS is capable of you can't really appreciate the awesomeness of a CSS preprocessor. Also, preprocessors are easy to write since if you already can write CSS. The most popular CSS preprocessors are Less and Sass. So what is a preprocessor anyway? In the simplest terms, a preprocessor takes one type of data and converts it to another type of data. Basically, the preprocessor is for the developer and the CSS is for the browser. What this means is when you're writing in Less or Sass you're creating a file with an extension .less (for Less) and .scss (for Sass). The browser can't read Less and Sass files so they have to be converted to CSS, which is a language the browser can read. Stylesheets are now often complex, long, and can be hard to maintain. A preprocessor can help you stay organized and navigate through the muddy waters of a giant stylesheet. You can use functinality that doesn't exit in CSS, like nesting, variables, and inheritance to make your code simpler.

How to get a preprocessor

An issue some designers have with preprocessors like Less and Sass is the way they need to be installed. Sass is a Ruby gem, so it requires that you have some knowledge of the command line. Less can be used with the command line or as a script file for the browser.  If you'd like the stay away from the command line, there are tools available now to avoid having to use it. Scout is a great option for Sass (and Compass, which is a Sass framework) if you're not wanting to get involved with using the command line. If you'd like to use Less instead of Sass, there are a few GUI (Graphical User Interface) tools available too. WinLess is for Windows and Less.app is available for Mac. If you haven't decided if you want to use Less or Sass there are a couple different apps that will help you with either. CodeKit for Mac and Prepros for Windows or Mac.  

Why should I use them?

CSS preprocessors have been around for a while, but only been used widely for the last few years. They give you the possibility for cleaner code with reusable pieces and can give you more flexibility by being able to do calculations within your CSS. You can also easily produce CSS that works across browsers since there are a lot of libraries filled with mixins (more on those later) that can solve these problems, which can be a huge time saver. You should always strive for your code to be DRY, which means Don't Repeat Yourself. Having DRY code is a core concept in development, and CSS processors can help you achieve that. It'll also help you to save time since you're not having to type or copy and paste the same things over and over. They also make your code much easier to maintain since you have the ability to create variables and functions. Here are just a few of the ways that using a preprocessor like Less or Sass can help you. Variables Preprocessors give you the opportunity to create variables, so that you don't have to continue to write the same line of code a zillion times. Once a variable is declared, it can be used throughout the stylesheet. Sass variables start with the $ and, just like a CSS property, are separated with a semicolon like this: [code language="css"] $brandColor: #F249E1; [/code] Less variables are similar to Sass variables. The only difference is that the variable is prepeneded with an @ instead of $: [code language="css"] @brandColor: #F249E1; [/code] Once you've set a variable, you can use it wherever you might need to use that color anywhere in your stylesheet. This is especially helpful if you decide to change the main color of the site. Instead of having to change every single time you've used that color, all you have to do is give your variable a new value. This is how it would look in Sass: [code language="css"] body{ color: $brandColor; } [/code] How using a variable is done in Less: [code language="css"] body{ color: @brandColor; } [/code] Nesting Another super awesome feature of preprocessors is the ability to reference multiple elements with the same parent element, which is called nesting. Your code will be more organized and easier to read since you can avoid typing the parent element out over and over. You can give a quick look at your code to find all the styled pieces of a larger element, like all of your navigation, in the same place. Here we're styling the nav, whose parent element is the header. We can apply styles to the header and the navigation at the same time. [code language="css"] header { margin: 10px; nav { height: 25px; } } [/code] Mixins Mixins are functions that allow the reuse of properties throughout the stylesheet. You can make groups of CSS declarations that you want to reuse throughout your site. You can make your mixins even more flexible by passing in values. Changing a property inside a mixin is much simpler than having to go through the whole stylesheet to make those changes. A helpful way to use mixins is to make a mixin to handle vender prefixes, that way you're not having to type them out a zillion times for every gradient you might need. You can use mixins anytime you have a block of information that can be applied to multiple properties, a common one is for rounded corners. You can create a mixin called corner and reference it later. Defining a mixin is really similar to defining a variable. Here's how you would declare a mixin called corner with a variable $radius inside the parentheses so we can pass in whatever radios we might want to use. This is what mixins look like in Sass [code language="css"] @mixin corner($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } [/code] Then to use it, you just need to add @include. Since we made it possible to pass in a value, here in the parenthesis we've set what we'd like the border-radius to actually be. [code language="css"] #about { @include corner(5px); } [/code] Less handles mixins a little differently. The actual words "mixin" and "include" aren't necessary. Here are some Less code that would perform the same way as the Sass code above. [code language="css"] .corner(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; border-radius: 2radius; } #about { .corner(5px); } <pre>[/code]   Inheritance Inheritance is the ability for CSS selectors to inherit the properties of another selector. Say you've got three divs with different classes that all need to be styled almost the same way. You could simply write out this code in Sass: [code language="css"] .about{ border: 1px solid #2E2EFE; padding: 10px; color: #2E2EFE; } .contact{ @extend .about; border-color: #01DFD7; } [/code] Using @extend in Sass will tell the element to inherit styles from wherever you tell it to. Less doesn't support inheriting styles like Sass and Stylus do. It treats inheritance like a mixin without arguments and then imports the styles into their own selectors.     CSS preprocessors can do so much more than we've covered in this article. If you're interested in learning more about them, check out the Pluralsight course A Better CSS: Less and Sass.

How do I pick one?

It doesn't really matter which preprocessor you choose. They're mostly pretty similar, especially Less and Sass. Play around with both to see which one is more intuitive for you. Maybe the way that Less handles mixins is confusing, since it doesn't require the word mixin and looks just like you're selecting a class from your HTML, so you choose Sass. Maybe you love how you don't have to actually write "mixin" or "include" so you decide Less is the way to go.   Have you used a CSS preprocessor before? If so, which is your favorite?