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

## Definition
Another powerful feature of Sass are **mixins**. Using mixins, you can group together multiple CSS declarations for reuse throughout your project.


## Example
Say we want to create a mixin to hold the vendor prefixes for a transform property. 

in SASS, we’d code it like so:

```SASS
@mixin transform {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
```

To add the mixin into our code, we then use the ```@include``` directive, like so:

```SASS
.navbar {
  background-color: orangered;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
    @include transform;
  }
}
```
*Note:* Don’t worry too much about where to put your mixin code for now. This will be explained in the next chapter. For now, just take note of the general idea!


All the code in the transform mixin will now be applied to the ```li``` element. You can also pass values into your mixins to make them even more flexible. 

Instead of adding a specified value, add a name (using a variable, like `property`) to represent the value like so:

```SASS
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
```
Now we can pass in whatever value we like, whenever we call the mixin:

```SASS
@include transform (rotate(20deg));
```

In our next lesson, we'll take a look at the function syntax.

# Definition
Another powerful feature of Sass are **mixins**. Using mixins, you can group together multiple CSS declarations for reuse throughout your project.


# Example
Say we want to create a mixin to hold the vendor prefixes for a transform property. 

in SASS, we’d code it like so:

```SASS
@mixin transform {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
```

To add the mixin into our code, we then use the ```@include``` directive, like so:

```SASS
.navbar {
  background-color: orangered;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
    @include transform;
  }
}
```
*Note:* Don’t worry too much about where to put your mixin code for now. This will be explained in the next chapter. For now, just take note of the general idea!


All the code in the transform mixin will now be applied to the ```li``` element. You can also pass values into your mixins to make them even more flexible. 

Instead of adding a specified value, add a name (using a variable, like `property`) to represent the value like so:

```SASS
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
```
Now we can pass in whatever value we like, whenever we call the mixin:

```SASS
@include transform (rotate(20deg));
```

In our next lesson, we'll take a look at the function syntax.

In this lesson, we'll be looking at the SASS mixin 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

Conclusion

Mixins

Definition #

Example