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

Add the following line to our script:

```NPM
"compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed"
```

And our ```package.json``` now 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"
},
```
This is a nice easy one! Here all we do is tell our ```css/style.prefix.css``` input file to output to ```css/style.css```. The ```--output-style compressed``` option will compress the code!

Let's test it out…

```NPM
npm run compress-css
```

Now, take a look at your ```style.css``` file. 

You’ll see that all of your styles have compressed into a single line of code! All white-space and comments have been removed. 

You can compare the file size of your ```style.prefix.css``` input file with the newly generated ```style.css``` file, to contrast with the compressed file size. 

With this simple step, we have just significantly reduced our page load!

Next up we'll bring the entire process together with one final script.

In this lesson, we'll learn how to add compression into our process  in order to fully-optimize our code before it’s released into the world!


Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

Compressing