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

SASS effectively gives us a lot of the programmatic benefits of working with code, only now with the ability to apply it to stylesheets. 

Over the next few lessons we'll be diving right into the features of SASS. 

First up let's  introduce **variables**.

## Definition 

**Variables** are a way to store information that you want to reuse throughout your stylesheet. 

They allow us to store values for colors, fonts or really any CSS value that you want to reuse!

We use the ```$``` symbol when we wish to make something a variable. 

## Example
In our SCSS, let's define a color variable:

```SASS
$color-primary: #ffff00; // Yellow

body {
  background-color: $color-primary;
}
```

This will of course, set our ```background-color``` to yellow. It's that simple! 

*Note:* You can use single line comments in Sass with ```//```. 

When we then run our compile*, it’ll output the following CSS:

```SASS
body {
  color: #ffff00;
}
```

This becomes extremely powerful when working on large projects! 

If you wish to make a change to a colour used throughout your stylesheets, it’s much simpler to alter if the color is defined in one location as a single variable.

The alternative to changing the value of one variable defined at one location is finding and replacing every reference to the value you want to change. This is a much more tedious task, especially if you want to implement a quick change to test out a different color or font.

Next up let's look at the nesting syntax!


*Later in the course we'll examine this process in detail. For now it's good to know that when we save our code into `sass/main.scss`, it'll automatically compile into the `css/style.css` file!

SASS effectively gives us a lot of the programmatic benefits of working with code, only now with the ability to apply it to stylesheets. 

Over the next few lessons we'll be diving right into the features of SASS. 

First up let's  introduce **variables**.

# Definition 

**Variables** are a way to store information that you want to reuse throughout your stylesheet. 

They allow us to store values for colors, fonts or really any CSS value that you want to reuse!

We use the ```$``` symbol when we wish to make something a variable. 

# Example
In our SCSS, let's define a color variable:

```SASS
$color-primary: #ffff00; // Yellow

body {
  background-color: $color-primary;
}
```

This will of course, set our ```background-color``` to yellow. It's that simple! 

*Note:* You can use single line comments in Sass with ```//```. 

When we then run our compile*, it’ll output the following CSS:

```SASS
body {
  color: #ffff00;
}
```

This becomes extremely powerful when working on large projects! 

If you wish to make a change to a colour used throughout your stylesheets, it’s much simpler to alter if the color is defined in one location as a single variable.

The alternative to changing the value of one variable defined at one location is finding and replacing every reference to the value you want to change. This is a much more tedious task, especially if you want to implement a quick change to test out a different color or font.

Next up let's look at the nesting syntax!


*Later in the course we'll examine this process in detail. For now it's good to know that when we save our code into `sass/main.scss`, it'll automatically compile into the `css/style.css` file!

SASS effectively gives us a lot of the programmatic benefits of working with code, only now with the ability to apply it to stylesheets. 

Over the next few lessons we'll be diving right into the features of SASS. 

First up let's  introduce **variables**.

# Definition 

**Variables** are a way to store information that you want to reuse throughout your stylesheet. 

They allow us to store values for colors, fonts or really any CSS value that you want to reuse!

We use the ```＄``` symbol when we wish to make something a variable. 

# Example
In our SCSS, let's define a color variable:

```SASS
$color-primary: #ffff00; // Yellow

body {
  background-color: $color-primary;
}
```

This will of course, set our ```background-color``` to yellow. It's that simple! 

*Note:* You can use single line comments in Sass with ```//```. 

When we then run our compile*, it’ll output the following CSS:

```SASS
body {
  color: #ffff00;
}
```

This becomes extremely powerful when working on large projects! 

If you wish to make a change to a colour used throughout your stylesheets, it’s much simpler to alter if the color is defined in one location as a single variable.

The alternative to changing the value of one variable defined at one location is finding and replacing every reference to the value you want to change. This is a much more tedious task, especially if you want to implement a quick change to test out a different color or font.

Next up let's look at the nesting syntax!


*Later in the course we'll examine this process in detail. For now it's good to know that when we save our code into `sass/main.scss`, it'll automatically compile into the `css/style.css` file!

In this lesson, we'll be introducing the concept of SAS S variables.

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

Variables

Definition #