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

# Final build
Lets now write one final script to run everything at once! 

Add the following line of code:

```NPM
"build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"
```

And our final ```package.json``` looks 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”,
  "compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
  "build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"
},
```

Here, we’ve simply added all our tasks ```compile-sass```, ```concat-css```, ```prefix-css``` & ```compress-css``` to be run when we execute our build command.

We use the [npm-run-all](https://www.npmjs.com/package/npm-run-all) package to ensure it works on all platforms. 

Enter the following command:
```NPM
npm install npm-run-all --save-dev
```

Let’s run a final test to confirm everything is working!

Go ahead and delete all of the files (except ```additional.css```), from the CSS folder. 

Once that’s done, run the build command:

```NPM 
npm run build-css
```

And there you go! All of your CSS files have been generated with this one command — powerful stuff!

# You can use this build on any future projects! 

To set up this build on future projects, you only need to copy the scripts and *__devDependencies__* from this project into the ```package.json``` of your new project and run ```npm install```.

We have now created a build process for our SASS projects! We can compile, merge, prefix and compress our stylesheets with a single command. 

Thus, we’ve significantly improved upon our development workflow!


Next up, I've included a bonus section on how we can use SASS mixins to better manage our Media Queries.

In this final step, we'll add one more script, which will execute the entire process!

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 Build!

Final build