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

The next step is to add a script to concatenate our existing CSS files. 

As mentioned previously, I’ve created the ```additional.css``` file for our merge. Inside of ```additional.css```, there are a few additional styles.

Go ahead and also create a new CSS file in your CSS folder. Just give it some additional styles — it doesn’t matter what. 

We'll be adding the following line of code to the end of our script:

```NPM
"concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css"
```
Our ```package.json``` will 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",
  "concat-css": "concat -o css/style.concat.css css/additional.css css/style.comp.css"
},
```
Let's break down the line of code we just added:

```concat-css:``` is our script name.

```concat -o css/style.concat.css``` is our package output file.

```css/additional.css css/style.comp.css``` are our CSS files to be concatenated.

In order for this to run, we’ll need to install the [concat](https://www.npmjs.com/package/concat) npm package, run the following command:

```NPM
npm install concat --save-dev
```
Once the install completes, you’ll see it listed under the *__devDependencies__* of your ```package.json```.

Now, let’s run the concat to make sure it works:

```NPM
npm run concat-css
```

You’ll now see the ```style.concat.css``` output file in your CSS directory! 

Open it up and take a look at your CSS, you’ll see that the contents of your ```additional.css``` and your ```style.comp.css``` have merged into one!

Next up, we'll take a look at how to automatically prefix our code.


In this lesson, we'll learn how to concatenate our files.

Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

Concatenation