Learn SASS to create dynamic, reusable styles and efficiently manage and migrate CSS projects.

Web Page Styling—CSS

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 who’s created a website knows that CSS is hard. In this module, we’ll learn how to use nesting, variables, mixins, partials, functions, and more to write dynamic and reusable styles of code. We’ll also learn the various methods to structure our projects and bring organization to our stylesheets. By the end of this module, we’ll have advanced knowledge of SASS. We’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 Front-End Development


![](/api/collection/5200180308606976/5033336129978368/page/6244829399875584/image/6707724566921216)

We will look at how we can use npm scripts to set up a Sass build process and boost our development workflow!


## What is a build process?
A build process is 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
Firstly, let's break down the steps involved. We will be **compiling**, **concatenating**, **prefixing** and **compressing** our stylesheets. As shown in the below diagram:

![](/api/collection/5200180308606976/5033336129978368/page/6244829399875584/image/5581824660078592)

Over the next few lessons, we'll be looking at each step in detail.

The ```main.scss``` file is our main SASS file which performs the **compilation** to CSS.

Next we'll take a look at **concatenation**. In this process, we want to merge all of our CSS files into one file. To test out this process, We'll use an additional CSS file called ```additional.css```.

Then we’ll look at **prefixing** with an autoprefixer. 

As a refresher, sometimes when working with CSS we'll use nonstandard properties. 
Browser vendors add prefixes for these experimental properties, so they can be used before they're standardized. 

When we use an autoprefixer, any vendor prefixes ( -webkit, -moz, etc) will be automatically added to our code, to help ensure its functionality across the major browsers.

And the final step in our process will be **compression**, where we compress all our code to maximize performance.

So let's go ahead and create our build process with npm scripts!



![](/api/collection/5200180308606976/5033336129978368/page/6244829399875584/image/6707724566921216)

We will look at how we can use npm scripts to set up a Sass build process and boost our development workflow!


# What is a build process?
A build process is 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
Firstly, let's break down the steps involved. We will be **compiling**, **concatenating**, **prefixing** and **compressing** our stylesheets. As shown in the below diagram:

![](/api/collection/5200180308606976/5033336129978368/page/6244829399875584/image/5581824660078592)

Over the next few lessons, we'll be looking at each step in detail.

The ```main.scss``` file is our main SASS file which performs the **compilation** to CSS.

Next we'll take a look at **concatenation**. In this process, we want to merge all of our CSS files into one file. To test out this process, We'll use an additional CSS file called ```additional.css```.

Then we’ll look at **prefixing** with an autoprefixer. 

As a refresher, sometimes when working with CSS we'll use nonstandard properties. 
Browser vendors add prefixes for these experimental properties, so they can be used before they're standardized. 

When we use an autoprefixer, any vendor prefixes ( -webkit, -moz, etc) will be automatically added to our code, to help ensure its functionality across the major browsers.

And the final step in our process will be **compression**, where we compress all our code to maximize performance.

So let's go ahead and create our build process with npm scripts!


In this section, we'll learn how to create a SASS build process, starting with a brief overview.


Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

Conclusion

Creating a Build Process

What is a build process? #