Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Sass partials let you split your stylesheet into separate files. They help modularize your CSS and keep things easier to maintain. Each partial is a single file and is like a small piece of the big CSS puzzle; it contains a portion of your stylesheet.
[MUSIC]
0:00
The CSS file for even a moderately
complex website is immensely long,
0:04
containing hundreds or
even thousands of styles.
0:08
Finding the single style you want to
edit could be like finding a needle in
0:12
a haystack.
0:15
What's worse?
0:16
When it's time to add a new style to
a style sheet with thousands of styles,
0:16
where should you put it?
0:20
The more styles a site has,
0:21
the more difficult it can be to
maintain a single style sheet.
0:23
Currently, our style sheet is one
lengthy list of variables, mix-ins,
0:27
placeholders and rule sets.
0:30
And if we keep adding components to
the site, it's going to get crowded fast.
0:32
Fortunately Sass has a great
solution to this problem, partials.
0:37
They're one of the main
benefits of working with Sass.
0:40
Partials is like split your style
sheets into separate files.
0:43
They help marginalize your CSS and
keep things easier to maintain.
0:46
Each partial is a single file and its
like a small piece in the big CSS puzzle.
0:50
It contains a portion of your style sheet.
0:54
You will use partials to
group related styles.
0:56
For example you could place audio
variables inside a partial and
0:59
your CSS reset and
base styles inside other partials.
1:02
You can create as many partials as you
like while you're writing you CSS and
1:05
when it's time to write
your finals CSS file,
1:09
Sass will merge the partials
into a single CSS file.
1:10
Let me show you how we can break our main
style up into small chunks using Sass
1:14
partials.
1:17
It's possible to split regular
CSS into multiple files, however
1:19
each CSS file creates and additional
HTTP request for the browser to process.
1:23
Too many of these request affect
the performance of your site, so
1:28
many developer avoid this approach.
1:31
Sass partials give you the best of both
world, multiple files to organize your
1:33
styles with the performance benefit of
a single production ready CSS file.
1:38
You can create tens or
1:42
hundreds of partials without
impacting your site's performance.
1:43
Using partials is a two-step process.
1:47
First, you create the partial
files to organize your CSS
1:49
into related groups of styles.
1:53
And second, import the partials
into a regular Sass file.
1:54
Sass compiles the imported
partial files and
1:58
outputs the final CSS into a single file.
2:01
So let's start with creating partials.
2:03
To create a partial,
simply add an underscore character
2:06
to the beginning of the name for
a sass or scss file.
2:08
The underscore is when instruct says that
the file should not be compiled into CSS.
2:12
So we're gonna break out related sections
of our style sheet into partials and
2:16
this will help organize our project.
2:20
For instance, variables can be
defined in their own partial.
2:22
So I'm going to create new folder
named Partials inside the scss folder.
2:25
In the partials folder
let's create a new file and
2:34
name it _variables.scss.
2:39
Now we'll cut all variables
out of style.scss and
2:49
paste them in our new variables partial.
2:54
Saving these changes produces an error
in the console and output CSS.
3:01
The error says that there
is an undefined variable
3:08
of color-text on line 35 of style.scss.
3:13
You see,
Sass won't directly compile partial files.
3:17
It ignores files with the underscore
character, so in this case,
3:21
Sass did not include the context of this
variables partial when compiling to css.
3:24
So right now all variables in
our project are undefined.
3:30
Saas will compile the contents of
a partial only when you import
3:36
it from within a a regular Sass or
scss file using the import directive.
3:40
So at the very top of style.scss, I'll
write a comment for our partial imports.
3:46
Then I'll import the new
variables .sspartials into this
3:54
file by typing @import followed by
the path to the file inside quotes.
3:59
When importing a partial, you can leave
out the underscore in the file name and
4:12
the .scss word.sass extension.
4:17
Just make sure you wrap the file name or
path to the file in single or
4:20
double quotes otherwise
Sass will throw an error.
4:24
Keep in mind that the style.scss file
4:27
does not have an underscore
character in its name.
4:30
It's a regular Sass file.
4:32
So when we save and compile these
changes the undefined variable error
4:34
no longer appears in the console or
the output CSS.
4:39
All our rules can now reference the
variables inside the variables partial and
4:44
include their values in the output CSS.
4:48
Next, let's break out other related
sections of our style sheet into partials,
4:52
like the mixins and place holders.
4:57
So I'll create a new file
inside the partials folder
4:59
named _mixins.scss.
5:04
Then I'll select and
cut all mixins out of style.scss and
5:10
paste them inside the mixins partial.
5:15
You can import multiple partials by
respecifying the import directive, so
5:24
for example in style.scss
we can type import,
5:29
Followed by partials mixins.
5:35
But by now, you know that Sass helps you
to avoid retyping and repeating code.
5:39
So of course, Sass provides a shortcut for
grouping your partial imports.
5:43
You define just one import directive then
write the files as a comma separated
5:48
list I usually place them on separate
lines to make the code easier to read.
5:54
All right, let's keep going.
6:04
Next, we'll create a partial for
our placeholder selectors.
6:05
So inside the partials holder, we'll
create a new file named _helpers.scss.
6:09
Then I'll cut the clear fix and
button place holders out
6:20
of style.scss and
paste them inside helpers.scss.
6:25
And import the new helpers
partial in style.scss.
6:32
So I'll replace the semi-colon
here with a comma.
6:39
Then on the next line specify
the path to the helper's partial with
6:42
partial/helpers then add
the semi-colon to this line.
6:47
So by separating our code into
the multiple scss file, so
6:52
our style sheet is starting
to look less cluttered.
6:56
And you can create as many partials as
you want while building your project, and
6:59
Sass will compile them to a single
file to use in production.
7:02
You can also import partials
onto other partials.
7:08
To make our project even more organized,
let's place
7:11
all the main styles written here in
style.scss in a partial of their own.
7:15
So in the partials folder
let's create a new file
7:19
named _main-styles.scss.
7:25
Then I'll go ahead and select and
7:29
cut all remaining rules
out of style.scss and
7:33
paste them into main-styles.scss
7:37
Then will import the file
at the top of style.css.
7:45
So now, styles.scss only does one thing,
7:54
it lists the partials that Sass
should import and compile.
7:57
And because there's no underscore in
the file name it's the file that Sass uses
8:01
to name the output CSS file.
8:05
On a larger Sass project with dozens or
hundreds of partial files,
8:09
you normally won't place all
your partials inside one folder.
8:13
You'll likely organize and
8:17
sort them into multiple directories
containing several partials.
8:18
For example, you may have
a directory containing partials for
8:22
your CSS reset, base and
typography styles.
8:24
Another directory just for
your layout and component styles.
8:28
And one for your variables,
functions, mixins, and helpers.
8:31
You could also place all your meta
queries into their own partial.
8:35
But I'm going to teach you a convenient
way to manage meta queries with Sass
8:38
in the next video.
8:41
Now, I'm going to stop here but
you don't have to.
8:43
Why don't you practice creating partials
by breaking main-styles.scss out into
8:46
other partials for the base,
layout and component styles.
8:51
You could even take
things a step further and
8:55
sort all related partials into
directory of their own Just remember to
8:57
keep your partials simple by only
breaking up related bits of your code.
9:02
In the next video,
I'll show you how I organize the files.
9:06
It's important to mention, that when
importing partials, the order in which you
9:11
import them matters because that's
the order in which they compile to CSS.
9:15
So import any dependencies first or a code
that's being referenced in other rules
9:19
like variables, mixins and helper rules.
9:23
Then input your base layout,
component styles and so on.
9:26
I've included links to Treehouse videos
that teach you advanced methods for
9:30
structuring your Sass projects
in the teachers notes.
9:34
You need to sign up for Treehouse in order to download course files.
Sign up