Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As powerful as CSS is, there are going to be times when you want to be able to do something that the language just won't let you do. Let me give you a quick example. Let's say that you use this color, which is a burgundy, throughout your entire site. Complex style sheets can contain hundreds of rules. Now, let's say that your client decides to use this flavor of burgundy instead. At this point, you'd better have a good find-and-replace option in your CSS editor, or you're going to be doing a lot of work by hand.
Wouldn't it be easier if you could simply declare a variable for the color at the top of your styles and then reference that variable throughout your code? To change the color site-wide, you could just simply change the color of the variable. Well, that would be great, but you can't do that with CSS--at least not yet. Well, that's where CSS preprocessors come in. CSS preprocessors are programs created to extend the functionality of CSS and make it easier for authors to write their code. They work by allowing authors to write styles using the preprocessor's extended syntax.
Others allow you to nest rules in much the same way that HTML does, which can make writing styles a bit faster and a lot easier. You can also take class selectors and reuse them in other styles. This ability to mix in styles from one rule to another is an incredibly powerful way to write more efficient styles. Some preprocessors even allow you to pass values into a class, so that the class covers the basic styling of an element, while different values allow you to tweak it in each rule that references it.
In most cases, you can also use operators. Now these allow us to do things like have the margin of one element equal to the margin of another element, plus another number. Now, that way, if the first element changes, the second element would maintain its spacing. Other preprocessors allow you to write simplified code for the new CSS3 features, adding the appropriate vendor prefixes and support for older browsers for you, after the code is processed. While CSS preprocessors are amazingly powerful, they aren't for everyone.
If you don't understand CSS or are just learning it, I wouldn't recommend a preprocessor until you're a little bit more comfortable with the native syntax of CSS. Of course, as with any tool, you need to decide for yourself if a preprocessor is right for your projects or not. Now, researching and experimenting with them is perhaps the best way to judge for yourself how effective they would be in your own workflow. So, let's take a look. Of the available CSS preprocessors, LESS and SASS are by far the most popular.
After checking out those two, you might want to spend some time exploring Turbine, Switch CSS, CSS Cacheer, CSS Preprocessor, and PCSS. Each has its own unique focus, and they come in varying degrees of complexity. Now CSS preprocessors certainly aren't for everyone, and they usually require a fair amount of experience to implement effectively. They are, however, extremely powerful tools designed to extend CSS and make writing it more efficient.
That alone makes them worth exploring.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.