Using CSS Preprocessors to Save Time (v1)

Introduction

Preprocessors (aka precompilers) can make your life much easier by eliminating code repetition and providing all sorts of yummy time-saving and code-saving features.

Learning Objectives

  • What is a preprocessor?
  • Why do preprocessors rock?
  • What does it mean that a preprocessor "compiles to CSS"?
  • What is SASS/SCSS?
  • How can you use SASS to nest CSS?
  • How can you use SASS to work with variables in your code?
  • Why is it awesome to use mix-ins with SASS?
  • If you’re not using Rails, how do you set up SASS?
  • What is LESS and how is it different from SASS?
  • What other preprocessors are out there?

Study

  1. Read Introduction to CSS Preprocessors from Steven Bradley

  2. Read 6 Reasons You Should Use a Preprocessor

  3. Read Choosing the Right CSS Preprocessor from Treehouse

  4. 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:

  1. A List Apart walks through specifically how you should be using SASS (lots of best practices in there) so read up and enjoy!

Additional Resources

UPDATED: 19.02.2021

CONTRIBUTORS: