SASS Build Process Tutorial
Tags: programming, tutorial, productivity, webdev
Published: 2022-09-06 14:08:38

Let's take a look at how we can use npm scripts to setup a Sass build process — and boost our development workflow.

## What is A Build Process?
It’s essentially just a sequence of tasks that perform automatically — which we run after project completion. Our production files are generated, and are then ready to be deployed to a web server.

## The Build Process
Please note: The below process assumes you have a Sass project already up and running! If not please see the article [Setting up Sass](https://dev.to/rembertdesigns/setting-up-sass-on-your-local-server-ko1), where I walk through the steps involved to setup up a Sass development environment on a local server.

**Ok! So what build process are we going to implement?**

We will be compiling, concatenating, prefixing and compressing our stylesheets.

`main.scss` — we start with our main sass file, which performs the **compilation** to CSS.

Next were going to take a look at **concatenation**. In this process, we want to merge our all of CSS files into one. To test out this process, I’ve created a file called `additional.css`.

Then we’ll be looking at **prefixing** with autoprefixer. Prefixing will automatically add vendor prefixes ( -webkit, -moz, etc) to our code, to help ensure its functionality across the major browsers.

The final step in our process will be **compressing**. We will compress all the code we have at this stage, to maximize performance.

Let's go ahead and create our build process with NPM scripts.

## Creating the Build Process

### Compilation
Open up your **package.json** file. The file that generates when you run `npm init` in your Sass project directory.

Add the following scripts:
```js
"scripts": {
  "watch-sass": "node-sass sass/main.scss css/style.css --watch",
  "compile-sass": "node-sass sass/main.scss css/style.comp.css"
},
```
And let's ensure the compile is working. In terminal, open up to your Sass project folder and run:
```js
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:
```js
npm run watch-sass
```
This tells the compiler to watch the source files for changes, and re-compile to CSS automatically, each time you save your Sass files — just be sure to keep the task running while you work!

### Concatenation
The next step is to add the script to concatenate our existing CSS files. As mentioned earlier I’ve created the `additional.css` file for our merge. Inside of it 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. Then add the following line to our script, like so:
```js
"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"
},
```
`concat-css`: is our script name.
`concat -o css/style.concat.css` our package output file.
`css/additional.css css/style.comp.css` are our CSS files to be concatenated.

We’ll need to install the [concat](https://www.npmjs.com/package/concat) npm package, run the following command:
```js
npm install concat --save-dev
```
Once the install completes you’ll see it listed under the _“devDependencies”_ of your **package.json**.

Now run the concat to make sure it works.
```js
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.

### Prefixing
We now move on to adding prefixing into our build. Our script now looks as follows:
```js
"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”
},
```
`prefix-css`: is our script name.
`postcss --use autoprefixer` autoprefixer is selected.
`-b 'last 5 versions'` we specify which browser versions we want our autoprefixes to cover.
`css/style.concat.css` is our input file.
`-o css/style.prefix.css` we specify our output file.

We’re using the npm [autoprefixer](https://www.npmjs.com/package/autoprefixer) package, which will need to be installed by running:
```js
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:
```js
npm install postcss-cli --save-dev
```
And then run the script as follows:
```js
npm run prefix-css
```
It will generate our `css/style.prefix.css` file. Take a look at the code in this file and you’ll see the browser prefixes have been added for you. This is great as we can now forget about prefixing and concentrate on writing clean code!

### Compressing
We’re now at the final step in our build process. Lets add the following line to our scripts:
```js
"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**.
```js
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 see the compressed file size. With this simple step we have just significantly reduced our page load!

### Build
Let's now write one final script to run everything at once! Add the following:
```js
"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:
```js
npm install npm-run-all --save-dev
```
Let's run a final test to confirm everything is working. Delete all of the files (except `additional.css`), from the CSS folder. Once that’s done, run the build command:
```js
npm run build-css
```
There you go! All of your CSS files have been generated with this one command — powerful stuff!

To get this build setup on future projects, all you need to do is copy the _scripts_ and _devDependencies_ from this project, into the **package.json** of your new project & run an `npm install`.

## Summary
We have now created a build process for our Sass projects! We can compile, merge, prefix and compress our stylesheets with a single command. And thus, we’ve significantly improved upon our development workflow.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)