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

Let's now move on to adding prefixing into our build. 

Recall that in CSS you'll often need to prefix your code in order to ensure cross-browser compatibility. Like in the following example:

```CSS
.myClass {
	-webkit-transition: all 10s linear;
	-moz-transition: all 10s linear;
	-ms-transition: all 10s linear;
	-o-transition: all 10s linear;
	transition: all 10s linear;
}
```
You could do this manually, or use a tool like [Autoprefixer](https://github.com/postcss/autoprefixer), which automates the process entirely. So we don't have to check if a prefix is required.

Let's add autoprefixing into our build process by adding the following line to the end of the script:

```NPM
"prefix-css": "postcss --use autoprefixer -b 'last 5 versions' css/style.concat.css -o css/style.prefix.css"
```
The script so far should look like so:
```NPM
"scripts": {
  "watch-sass": "node-sass sass/main.scss css/style.css --watch",
  "compile-sass": "node-sass sass/main.scss css/style.comp.css",
  "concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css",
  "prefix-css": "postcss --use autoprefixer -b 'last 5 versions' css/style.concat.css -o css/style.prefix.css"
},
```

So here, ```prefix-css``` is our script name.

```postcss --use autoprefixer``` autoprefixer is selected.

```-b 'last 5 versions'``` specifies which browser versions we want our autoprefixes to cover (in this case the last 5).

```css/style.concat.css``` is our input file.

```-o css/style.prefix.css``` is our specified output file.

We’re using the npm [autoprefixer](https://www.npmjs.com/package/autoprefixer) package, which will need to be installed by running:

```NPM
npm install autoprefixer --save-dev
```

We also need to install [PostCSS](https://www.npmjs.com/package/postcss) (autoprefixer is part of this plugin). We use the following command:

```NPM
npm install postcss-cli --save-dev
```

And then run the script as follows:
```NPM
npm run prefix-css
```

It will generate our ```css/style.prefix.css``` file. 

Take a look at the code in this file; you’ll see the browser prefixes have been automatically added for you.


This is great as we can now forget about prefixing and concentrate on writing clean code!

In the next lesson, we'll add compression to our process.

In this lesson, we'll learn how to setup autoprefixing.

Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

Prefixing