Learn SASS to create dynamic, reusable styles and efficiently manage and migrate CSS projects.

Web Page Styling—CSS

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 who’s created a website knows that CSS is hard. In this module, we’ll learn how to use nesting, variables, mixins, partials, functions, and more to write dynamic and reusable styles of code. We’ll also learn the various methods to structure our projects and bring organization to our stylesheets. By the end of this module, we’ll have advanced knowledge of SASS. We’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 Front-End Development

## What is SASS?

**SASS** is a scripting language that provides us with features and tools that regular CSS doesn’t have. 

Using SASS we can write more readable, maintainable and reusable code. Think of it as an extension that adds power and elegance to CSS.


It gives us various features such as:

- Variables
- Nesting
- Mixins
- Functions
- Partials & Imports
- Inheritance (Extend functionality)
- Control directives

In other words, SASS helps us organize large stylesheets in a more maintainable way. 

And we’ll be looking into all of these features throughout this course!

## SCSS or Sass?

In SASS there are **two** different syntaxes: **SCSS** and **Sass**. However after being compiled they generate similar output.


**SCSS** (aka Sassy CSS) is the modern standard. It’s syntax is very similar to CSS in that it uses brackets and semicolons. Even normal CSS is valid in this syntax. The file extension is ```.scss```.

**Sass** is an older syntax that focuses on indentation to separate code blocks and newline characters to separate rules. It has the file extension ```.sass```.

Throughout this course, I will use **SCSS** as it’s the more natural syntax (when we use SCSS we still call it SASS!).

It’s also really easy to convert regular CSS to SCSS, as you can just paste in the CSS and work from there!

*Note:* To see how to install and configure SASS on a local machine, check out the lesson titled "How to Install and Configure SASS Locally" in the appendix.

Next up, let's take a deep dive into the features of SASS!

# What is SASS?

**SASS** is a scripting language that provides us with features and tools that regular CSS doesn’t have. 

Using SASS we can write more readable, maintainable and reusable code. Think of it as an extension that adds power and elegance to CSS.


It gives us various features such as:

- Variables
- Nesting
- Mixins
- Functions
- Partials & Imports
- Inheritance (Extend functionality)
- Control directives

In other words, SASS helps us organize large stylesheets in a more maintainable way. 

And we’ll be looking into all of these features throughout this course!

# SCSS or Sass?

In SASS there are **two** different syntaxes: **SCSS** and **Sass**. However after being compiled they generate similar output.


**SCSS** (aka Sassy CSS) is the modern standard. It’s syntax is very similar to CSS in that it uses brackets and semicolons. Even normal CSS is valid in this syntax. The file extension is ```.scss```.

**Sass** is an older syntax that focuses on indentation to separate code blocks and newline characters to separate rules. It has the file extension ```.sass```.

Throughout this course, I will use **SCSS** as it’s the more natural syntax (when we use SCSS we still call it SASS!).

It’s also really easy to convert regular CSS to SCSS, as you can just paste in the CSS and work from there!

*Note:* To see how to install and configure SASS on a local machine, check out the lesson titled "How to Install and Configure SASS Locally" in the appendix.

Next up, let's take a deep dive into the features of SASS!

In this introduction, we'll define SASS and its relationship to SCSS (aka Sassy CSS).

Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

Conclusion

What is SASS?

What is SASS? #