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/5327903643402240/image/5538124944900096)

## Overview

Let's take a look into how we structure our SASS projects. 

As projects grow and expand, the need to organize our directory structure increases dramatically. SASS helps us achieve this by giving us the ability to modularize our stylesheet code. We also have the added benefit of creating components that can be reused across multiple projects. Adding a further element of structure & organization.

## How do we structure our Sass projects?

We do this by using **Partials** (which we introduced earlier) to divide up our stylesheets into separate files. These files will represent different components. We then import our partials using an ```@import``` directive, into one master stylesheet — typically the ```main.scss``` file. 

**For example:**

```SASS 
// File: main.scss

@import 'layout/header';
```

We can then create a layout folder for our layout specific files, such as:

```SASS
// File: _header.scss

// This file contains all styles related to the header of the site/application.

/* STYLES GO HERE */
```
*Remember:* The name of a partial file should always begin with an underscore ```_```.

Next up, let's take a look at some of the ways we could choose to structure our projects!

Let's keep in mind that there is no one *correct* structure — it's entirely up to you!


![](/api/collection/5200180308606976/5033336129978368/page/5327903643402240/image/5538124944900096)

# Overview

Let's take a look into how we structure our SASS projects. 

As projects grow and expand, the need to organize our directory structure increases dramatically. SASS helps us achieve this by giving us the ability to modularize our stylesheet code. We also have the added benefit of creating components that can be reused across multiple projects. Adding a further element of structure & organization.

# How do we structure our Sass projects?

We do this by using **Partials** (which we introduced earlier) to divide up our stylesheets into separate files. These files will represent different components. We then import our partials using an ```@import``` directive, into one master stylesheet — typically the ```main.scss``` file. 

**For example:**

```SASS 
// File: main.scss

@import 'layout/header';
```

We can then create a layout folder for our layout specific files, such as:

```SASS
// File: _header.scss

// This file contains all styles related to the header of the site/application.

/* STYLES GO HERE */
```
*Remember:* The name of a partial file should always begin with an underscore ```_```.

Next up, let's take a look at some of the ways we could choose to structure our projects!

Let's keep in mind that there is no one *correct* structure — it's entirely up to you!

In this next lesson, we'll learn all about structuring our SASS projects, 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

How should we structure our Sass projects?

Overview #