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

# Definition 
The ampersand ```&``` operator is often used when *nesting* in SASS and is an extremely useful feature. 

It can be a great time-saver, especially if you happen to be coding your stylesheets with the [BEM methodology](http://getbem.com/introduction/), or using any systematic naming convention for your class names.

# Example

See the following HTML:

```HTML
<button class = "btn btn--red"> Click me! </button>
```
Typical styling would be something like this:


.btn {
  display: inline-block;
  padding: 15px 32px;
}
.btn--red {
  background-color: #ff0000; // Red
}
.btn:hover {
  background-color: #fff; // White
}

<html>
  <head>
    <title>Page Title</title>
  </head>
<body>
  <button class = "btn btn--red"> Click me! </button>
</body>
</html>

codemirror

With the ```&``` operator we can be much more efficient:



.btn {
  display: inline-block;
  padding: 15px 32px;
  &--red {
    background-color: #ff0000; // Red
  }
  &:hover {
    background-color: #fff; // White
  }
}

Notice that we’ve now nested the child selectors that use the same ```.btn``` name, represented by the ```&``` operator. name.

When compiled the ```&``` operator will be replaced by its enclosing selector name!

Next up we'll learn about control directives.

# Definition 
The ampersand ```&``` operator is often used when *nesting* in SASS and is an extremely useful feature. 

It can be a great time-saver, especially if you happen to be coding your stylesheets with the [BEM methodology](http://getbem.com/introduction/), or using any systematic naming convention for your class names.

# Example

See the following HTML:

```HTML
<button> Click me! </button>
```
Typical styling would be something like this:


In this lesson, we'll be looking at the ampersand ('&') operator syntax.

Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

The '&' Operator

Definition #

Example #