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

If you’re using SASS on a small project, such as a single web page, a very minimal project structure could be:


```SASS
_base.scss
_layout.scss
_components.scss
main.scss
```

Here we have 3 partial files connecting up to our ```main.scss```.

**Base:** Contained within this file are all your resets, variables, mixins, and any utility classes.

**Layout:** Contains all the CSS that handles the layout, such as the container and any grid systems.

**Components:** Anything reusable such as buttons, navbars, cards etc.

**Main**: It should **ONLY** contain the imports for the above files.

If any file grows too cluttered or disorganized, it’s time to expand our structure. For example, consider adding a new folder for your components, and then break it up into individual files such as ```_button.scss``` or ```_carousel.scss```.

However, when working on a larger project, we’ll need a more rigorous architecture, which we’ll look at in the next lesson!


In this lesson, we'll take a look at an example of a basic project structure.

Basic structure