Gain insights into Sass for CSS, exploring nesting, variables, mixins, and more. Discover methods to structure projects and write dynamic, reusable styles for advanced frontend development.

SASS (Syntactically Awesome Style Sheets) is a scripting language known as a CSS preprocessor. CSS preprocessors are compiled into CSS and by doing so, extend the default capabilities of CSS.

Sass makes authoring stylesheets faster, easier, and more flexible. It’s a welcome helper in the world of web design, because anyone that’s created a website knows that CSS is hard.

In this course, you will learn how to use nesting, variables, mixins, partials, functions and more to write dynamic and reusable styles of code. You’ll also learn the various methods to structure your projects and bring organization to your stylesheets.

By the end of this course, you’ll have advanced knowledge of SASS. You’ll be able to migrate an existing CSS codebase, as well as set up an entire project (and build process) from scratch.

Sass for CSS: Advanced Frontend Development

![](/api/collection/5200180308606976/5033336129978368/page/5307477550694400/image/6614800567107584)

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](https://developer.mozilla.org/en-US/)

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!

![](/api/collection/5200180308606976/5033336129978368/page/5307477550694400/image/6614800567107584)

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](https://developer.mozilla.org/en-US/)

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!

In this lesson, we'll introduce the concept of CSS pre-processing, and take a look at how it benefits us as front-end developers.

Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

An Introduction to CSS pre-processing