An Introduction to CSS pre-processing

Welcome to Learning SASS from scratch!

My aim in this course is to get you from beginner to expert, with a solid practical understanding to utilize in real-world projects!

Before taking our deep dive into all things SASS, I’d like to begin by providing a little context.

SASS (or Syntactically Awesome Style Sheets) is a tool known as a CSS preprocessor. CSS preprocessors are scripting languages that extend the default capabilities of CSS.

Other popular examples include LESS and Stylus. They are in fact all great tools to utilize when you wish to code more maintainable CSS. Especially when working with larger codebases.

Defining CSS Preprocessors #

“A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain”. — MDN

Once you’re comfortable with CSS, the next natural step is to utilize a preprocessor. The biggest advantage is not having to repeat yourself.

This advantage is known as keeping your CSS Dry, which stands for “Don’t Repeat Yourself.”

Why use preprocessors? #

The primary advantages are as follows:

• Cleaner code thanks to variables and nesting.
• Greater ease of maintenance and organisation as we can separate our files into modules.
• Ability to implement logic and calculation in our stylesheets.
• Overall improvement in workflow, which will save hours of development time!

Of all the preprocessors, SASS is by far the most popular within the developer community.

So let’s get Sassy!