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
In this video, we'll finish up our component partials, then see how we can make importing all project partials more manageable.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So now there are a few more container
rules we need to add.
0:00
So let's go back to our partial, and let's
scroll down and
0:03
grab the primary content rule here.
0:08
This grouped rule and the two rules below.
0:11
So let's go ahead and select these.
0:15
Cut them, and I'm going to paste them
right beneath the first rule.
0:18
[BLANK_AUDIO]
0:23
All right.
0:28
So, now we can go ahead and save our
containers partial and close it out.
0:28
And finally, let's move inside our
components directory.
0:32
And this is where we're going to add the
styles for
0:36
our site's standalone components or
modules.
0:39
These are the smaller reusable parts of
our sites like buttons,
0:42
icons, typography and so forth.
0:45
So, first let's open up our button's
partial and backinstyle.sccs.
0:48
Let's go ahead and grab this call-out rule
here, and call it a button.
0:54
So let's cut it out and paste it inside
the buttons partial.
0:59
I'll save it close out and open up icons.
1:05
And for icons we're gonna grab the arrow
rule.
1:08
So these are the styles to our arrow
image.
1:12
So cut it out and paste it inside the
icons partial.
1:14
And I'll save and close.
1:19
And finally, let's open up our typography
partial and
1:22
this will contain all of the typography
styles in our page.
1:25
So back over in style.scss.
1:30
Let's scroll up and grab the intro rule,
the main title rule, and
1:34
the main heading rule.
1:38
And we'll also want the web fonts.
1:39
So let's select everything beginning from
the webfonts
1:40
[BLANK_AUDIO]
1:43
All the way down to the intro rule.
1:45
And I'll cut that out and paste it inside
our typography partial.
1:48
I'll go ahead and remove this comment.
1:56
Clean things up a little bit.
1:59
And now, I'll just save and close it out.
2:01
All right.
2:05
So it looks like we have everything in the
right place.
2:06
And we'll get back to these remaining
styles in just a bit.
2:09
So, as you can see, the goal is to keep
partial files small and readable.
2:13
So now, if you're wondering about these
index.scss
2:20
partials inside each of the directories.
2:24
Well, I'm actually using these files to
import
2:29
the partial files from each directory into
one file.
2:32
So, here's an example of one of them which
is importing the base partial.
2:35
The components index is importing all the
partials in the components directory.
2:39
And the same with our index partial inside
the layout directory.
2:45
So now instead of importing every single
partial inside our
2:51
global application style sheet.
2:55
We only need to import the single index
reference
2:58
from each directory into application.scss.
3:01
So this makes everything a lot more
manageable.
3:06
So now nothing is compiling to plain CSS
just yet.
3:09
In fact, if we preview our project,
3:12
we can see that all of the styles in our
page are gone.
3:14
But no worry, because what we need to do
next is go back to application.scss.
3:18
So this is our global Sass file.
3:24
And we're going to use Sass' import
directive to sort of
3:28
type all the files into this one style
sheet.
3:31
Which will be great for
3:33
the browser because it will only require
one request to the server.
3:34
All right, so let me go ahead and open one
of these index files.
3:40
And let me copy this comment file and
paste it inside our application.scss file.
3:42
And let me just change the comment to say
Global Imports.
3:50
So it's important to note that when
importing partial files,
3:57
the order in which we import them is
important.
4:01
Since it does affect the cascade in the
final output.
4:04
So we need to follow our original CSS
order as close as possible.
4:07
So first, we're going to import all the
base styles,
4:12
let's type at import, then a set of quotes
followed by a semicolon.
4:15
And inside the quotes we're going to
define the path
4:21
to the index partial inside the base
directory.
4:25
So let's say base/index.
4:28
I'll just go ahead and copy this.
4:32
Paste two of them, right below.
4:34
And the next one will be for our layout
styles.
4:36
And finally, our components.
4:40
[BLANK_AUDIO]
4:42
So as we can see want the base styles
first,
4:44
then the layout styles followed by the
components.
4:47
So now when we save and compile all our
Sass and
4:50
go back to the browser and refresh.
4:54
We can see how Sass brings our styles back
again.
4:58
And it actually outputs all the partials
we just created into our main style sheet.
5:01
So if I open up application.css there's
all our compiled css.
5:07
And actually since we did change our
5:12
style sheet name from style.css to
application.css.
5:15
We can actually remove the old reference
to style.css.
5:18
So let me select the style.css map file,
right-click, Delete.
5:21
Then I'll select style.css, right-click,
and Delete.
5:27
We no longer need those since we're now
using application.css.
5:30
And that's all coming from the
application.scss global file.
5:34
All right?
5:39
So it looks like we're good to go.
5:40
So this is a suggested way of organizing
your partial files and
5:42
you can do things a little differently if
you'd like.
5:46
Now even if we don't use any of these Sass
syntax, which we haven't yet.
5:48
You can see that at the very least it
helps keep our project organized and
5:51
easily maintainable.
5:56
So again, we could maybe stop here and
say,
5:57
well okay we have our Sass project all
done, so let's call it a day.
6:01
But there's still lots more we can do to
optimize our CSS
6:04
even with the most basic Sass features.
6:08
So soon, we'll see how variables, mixins,
placeholders and
6:11
nesting can really speed up our workflow.
6:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up