- Breaking the Style Sheet into Partials 7:35
- Finishing and Importing our Partials 6:17
- Placeholder Selectors 10:59
- Nesting Selectors 5:22
- Color Variables 8:34
- Font Stack and Asset Variables 6:44
- Reusing Code with Mixins 6:57
- Writing a Mixin for Common Text Patterns 6:45
- Defining Media Queries 8:13
- Refactoring with Sass Review 7 questions
Preview
Video Player
00:00
00:00
Finishing and Importing our Partials
6:17In this video, we'll finish up our component partials, then see how we can make importing all project partials more manageable.
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