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

## Definition
Partials in SASS help us to break up our files into smaller files without affecting performance.

The use of partials allows us to modularize our CSS, to help keep things maintainable. 

We divide up our Sass into separate files representing different components. A partials' name will always start with an underscore ```_```.
We then import the partial using an ```@import``` directive.

## Example
Let's say our Sass file is getting rather large. We might choose to make a partial file that contains just the code that’s relevant to the header section; we’d call it ```_header.scss``` and move the appropriate code into that new file. 

We would then import it back into ```main.css```, like so:

```SASS
// In main.scss
@import 'header';
```

*Note:* When you import a file, there’s no need to include the ```_``` or ```.scss``` file extension.

## @import in CSS vs SASS
The ```@import``` directive is of course, also available in CSS. However, there is an important difference. Whenever an import statement is used in CSS, an HTTP request is made to the server. This increases the amount of resource requests and negatively affects the performance of a web page. SASS does not do that. SASS takes the file that you want to import from and combines it with the file you’re importing. So you can serve a single CSS file to the web browser, which does not affect the performance.


In the next lesson, we'll be looking at how to implement inheritance with ```extends```.

# Definition
Partials in SASS help us to break up our files into smaller files without affecting performance.

The use of partials allows us to modularize our CSS, to help keep things maintainable. 

We divide up our Sass into separate files representing different components. A partials' name will always start with an underscore ```_```.
We then import the partial using an ```@import``` directive.

# Example
Let's say our Sass file is getting rather large. We might choose to make a partial file that contains just the code that’s relevant to the header section; we’d call it ```_header.scss``` and move the appropriate code into that new file. 

We would then import it back into ```main.css```, like so:

```SASS
// In main.scss
@import 'header';
```

*Note:* When you import a file, there’s no need to include the ```_``` or ```.scss``` file extension.

# @import in CSS vs SASS
The ```@import``` directive is of course, also available in CSS. However, there is an important difference. Whenever an import statement is used in CSS, an HTTP request is made to the server. This increases the amount of resource requests and negatively affects the performance of a web page. SASS does not do that. SASS takes the file that you want to import from and combines it with the file you’re importing. So you can serve a single CSS file to the web browser, which does not affect the performance.


In the next lesson, we'll be looking at how to implement inheritance with ```extends```.

In this lesson, we'll be looking at how to modularize our files with partials & importing.

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

Partials and Importing

Definition #