Lesson Weekend

Redundant, tangled code is difficult to debug and maintain, is less efficient, and harder for other developers to understand. This is why all professional developers aim to keep their code DRY ("Don't repeat yourself"). This is done by creating reusable functions, using variables, classes, and loops, continually checking if/where we can refactor, and more. You've had plenty of experience with this in your previous courses.

However, you've likely noticed it's harder to keep CSS code DRY than languages like JavaScript. Thankfully, there are tools called CSS preprocessors that allow us to introduce programmatic functionality, like functions, variables, conditionals, and more, into styles to keep them clean and efficient.

In this lesson we'll learn about CSS preprocessors, including what they are, why developers use them, and the functionality they offer. Then in the next few lessons we'll walk through installing, configuring, and using one of the most popular preprocessors in the field of front end development: Sass.

CSS Preprocessors

In computer science, a preprocessor is a program or script that takes data or code in, and processes it in some manner, then outputs it for another program to use. That output is the preprocessed version of the original input data.

CSS preprocessors allow us to write styles in a different, more efficient syntax than CSS. This special syntax is then run through a program that processes it, turning it back into plain old CSS for the browser to render.

This means we get to write in a more efficient, robust, DRY-er language than CSS; but this fancy code is programmatically compiled back into the plain old CSS the browser requires. Best of both worlds!

Benefits of Preprocessors

But why would we write in this special language if it just transforms back into normal CSS anyway? Why not just write in CSS to begin with?

Well, because preprocessors have powerful functionality that allows us to employ tactics normally only reserved for programming languages. Functionality not supported by traditional CSS. These includes:

  • Variables
  • Functions
  • Conditionals
  • Reusable blocks of styles called Mixins (similar to JavaScript classes)
  • Nesting
  • Operational functions
  • Joining multiple stylesheets together automatically, allowing us to better separate and organize styles

In larger projects, the ability to use these features far outweighs the extra step of compiling special syntax back into plain CSS.

Types of Preprocessors

There are many different CSS preprocessors available, each with slightly different features and use cases. Some of the most common include:

For the rest of the week we'll practice using Sass; it's most commonly used in professional development environments, is well-supported, and has an active community. But keep in mind that all CSS preprocessors have the same general goal and sets of steps. So, once you feel comfortable with Sass you'll also be prepared to pick up other CSS preprocessors if future jobs and internships require.

Lesson 19 of 36
Last updated more than 3 months ago.