Using CSS Preprocessors to Save Time

Introduction

Preprocessors (aka precompilers) can make your life much easier when building a website. To be more specific the preprocessors eliminate code repetition and provide all sorts of yummy time-saving and code-saving features.

Learning Objectives

• What a preprocessor is
• Why preprocessors rock
• What it means that a preprocessor "compiles to CSS"
• SASS/SCSS
• How to use SASS to nest CSS
• How to use SASS to work with variables in our code
• Why we should use mix-ins with SASS
• How to set up SASS
• What LESS is and how it is different from SASS
• Other preprocessors we can find out there

Study

1. Watch this recorded live session

2. Read Introduction to CSS Preprocessors from Steven Bradley

3. Read 6 Reasons You Should Use a Preprocessor

4. Read Choosing the Right CSS Preprocessor from Treehouse

5. Look over SASS’s getting started guide, which provides a brief look at its awesome features and then watch this 20-minute Sass Crash Course:

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

• SASS’s main website
• LESS’s main website
• Partials & Imports in SASS
• A List Apart walks through specifically how you should be using SASS (lots of best practices in there) so read up and enjoy!