[MUSIC]

The CSS file for even a moderately complex website is immensely long,

containing hundreds or even thousands of styles.

Finding the single style you want to edit could be like finding a needle in

a haystack.

What's worse?

When it's time to add a new style to a style sheet with thousands of styles,

where should you put it?

The more styles a site has,

the more difficult it can be to maintain a single style sheet.

Currently, our style sheet is one lengthy list of variables, mix-ins,

placeholders and rule sets.

And if we keep adding components to the site, it's going to get crowded fast.

Fortunately Sass has a great solution to this problem, partials.

They're one of the main benefits of working with Sass.

Partials is like split your style sheets into separate files.

They help marginalize your CSS and keep things easier to maintain.

Each partial is a single file and its like a small piece in the big CSS puzzle.

It contains a portion of your style sheet.

You will use partials to group related styles.

For example you could place audio variables inside a partial and

your CSS reset and base styles inside other partials.

You can create as many partials as you like while you're writing you CSS and

when it's time to write your finals CSS file,

Sass will merge the partials into a single CSS file.

Let me show you how we can break our main style up into small chunks using Sass

partials.

It's possible to split regular CSS into multiple files, however

each CSS file creates and additional HTTP request for the browser to process.

Too many of these request affect the performance of your site, so

many developer avoid this approach.

Sass partials give you the best of both world, multiple files to organize your

styles with the performance benefit of a single production ready CSS file.

You can create tens or

hundreds of partials without impacting your site's performance.

Using partials is a two-step process.

First, you create the partial files to organize your CSS

into related groups of styles.

And second, import the partials into a regular Sass file.

Sass compiles the imported partial files and

outputs the final CSS into a single file.

So let's start with creating partials.

To create a partial, simply add an underscore character

to the beginning of the name for a sass or scss file.

The underscore is when instruct says that the file should not be compiled into CSS.

So we're gonna break out related sections of our style sheet into partials and

this will help organize our project.

For instance, variables can be defined in their own partial.

So I'm going to create new folder named Partials inside the scss folder.

In the partials folder let's create a new file and

name it _variables.scss.

Now we'll cut all variables out of style.scss and

paste them in our new variables partial.

Saving these changes produces an error in the console and output CSS.

The error says that there is an undefined variable

of color-text on line 35 of style.scss.

You see, Sass won't directly compile partial files.

It ignores files with the underscore character, so in this case,

Sass did not include the context of this variables partial when compiling to css.

So right now all variables in our project are undefined.

Saas will compile the contents of a partial only when you import

it from within a a regular Saas or scss file using the import directive.

So at the very top of style.scss, I'll write a comment for our partial imports.

Then I'll import the new variables .sspartials into this

file by typing @import followed by the path to the file inside quotes.

When importing a partial, you can leave out the underscore in the file name and

the .scss word.sass extension.

Jus make sure you wrap the file name or path to the file in single or

double quotes otherwise Sass will throw an error.

Keep in mind that the style.scss file

does not have an underscore character in its name.

It's a regular Sass file.

So when we save and compile these changes the undefined variable error

no longer appears in the console or the output CSS.

All our rules can now reference the variables inside the variables partial and

include their values in the output CSS.

Next, let's break out other related sections of our style sheet into partials,

like the mixins and and place holders.

So I'll create a new file inside the partials folder

named _mixins.scss.

Then I'll select and cut all mixins out of style.scss and

paste them inside the mixins partial.

You can import multiple partials by respecifying the import directive, so

for example in style.scss we can type import,

Followed by partials mixins.

But by now, you know that Sass helps you to avoid retyping and repeating code.

So of course, Sass provides a shortcut for grouping your partial imports.

You define just one import directive then write the files as a comma separated

list I usually place them on separate lines to make the code easier to read.

All right, let's keep going.

Next, we'll create a partial for our placeholder selectors.

So inside the partials holder, we'll create a new file named _helpers.scss.

Then I'll cut the clear fix and button place holders out

of style.scss and paste them inside helpers.scss.

And import the new helpers partial in style.scss.

So I'll replace the semi-colon here with a comma.

Then on the next line specify the path to the helper's partial with

partial/helpers then add the semi-colon to this line.

So by separating our code into the multiple scss file, so

our style sheet is starting to look less cluttered.

And you can create as many partials as you want while building your project, and

Sass will compile them to a single file to use in production.

You can also import partials onto other partials.

To make our project even more organized, let's place

all the main styles written here in style.scss in a partial of their own.

So in the partials folder let's create a new file

named _main-styles.scss.

Then I'll go ahead and select and

cut all remaining rules out of style.scss and

paste them into main-styles.scss

Then will import the file at the top of style.css.

So now, styles.scss only does one thing,

it lists the partials that Sass should import and compile.

And because there's no underscore in the file name it's the file that Sass uses

to name the output CSS file.

On a larger Sass project with dozens or hundreds of partial files,

you normally won't place all your partials inside one folder.

You'll likely organize and

sort them into multiple directories containing several partials.

For example, you may have a directory containing partials for

your CSS reset, base and typography styles.

Another directory just for your layout and component styles.

And one for your variables, functions, mixins, and helpers.

You could also place all your meta queries into their own partial.

But I'm going to teach you a convenient way to manage meta queries with Sass

in the next video.

Now, I'm going to stop here but you don't have to.

Why don't you practice creating partials by breaking main-styles.scss out into

other partials for the base, layout and component styles.

You could even take things a step further and

sort all related partials into directory of their own Just remember to

keep your partials simple by only breaking up related bits of your code.

In the next video, I'll show you how I organize the files.

It's important to mention, that when importing partials, the order in which you

import them matters because that's the order in which they compile to CSS.

So import any dependencies first or a code that's being referenced in other rules

by variables, mixins and helper rules.

Then input your base layout, component styles and so on.

I've included links to Treehouse videos that teach you advanced methods for

structuring your Saas projects in the teachers notes.