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

Before beginning, make sure to have your SASS project directory open! Then, open your ```package.json``` file. This is the file that generates when you run ```npm init``` in your Sass project directory.

In ```package.json```, add the following code:

```NPM
"compile-sass": "node-sass sass/main.scss css/style.comp.css"
```

Your script should now be as follows:

```NPM
"scripts": {
  "watch-sass": "node-sass sass/main.scss css/style.css --watch",
  "compile-sass": "node-sass sass/main.scss css/style.comp.css"
},
```

Remember we added the ```--watch``` flag previously, in the lesson [How to Install and Configure SASS](https://www.educative.io/courses/sass-for-css/compilation).

Now let’s ensure the compile is working:

In a terminal, open up to your Sass project folder and run:
```NPM
npm run compile-sass
```

It should complete the render and output the **style.comp.css** file to your CSS folder. 

We will run this task at the end of the project to complete our final build!

While we are developing the project, we run the watch task with:

```NPM
npm run watch-sass
```

This tells the compiler to watch the source files for changes, and re-compile to CSS automatically, whenever you save your Sass files. Just be sure to keep the task running while you work!

In the next lesson, we'll look at the concatenation process.


In this lesson, we'll learn how to setup a compilation script and run our watch script to check for file changes.


Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

Compilation