Preview
Video Player
00:00
00:00
Separate Your Stylesheet Into Partials
9:37Sass 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