- 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
Placeholder Selectors
10:59Next, we'll find repeating patterns in our code and extract them into placeholder selectors.
So next, we'll need to find repeating
patterns in our code and
0:00
extract them into placeholder selectors.
0:04
That way, we can reuse bits of code
without creating extra output.
0:06
Now, what's great about placeholder
selectors is that they do not
0:10
compile to CSS unless they're extended or
called up in another rule.
0:14
And when they do output to CSS,
0:19
the result is one grouped selector rule
containing the shared styles.
0:21
So because of that, placeholders or
0:26
extends, as they're sometimes called, are
a smart solution for
0:28
sharing styles between related rule sets,
particularly base styles.
0:31
So when working with placeholder
selectors, I'll usually create an extends
0:37
partial inside each of the folders and
create all the related placeholders there.
0:42
So that keeps everything a little closer
together, right?
0:47
But in this case, we're only going to
extend rules in our layout styles.
0:50
So inside our layout directory, let's
create a new file.
0:54
So I'm going to select it, right-click the
folder, and say New File.
0:57
And we're going to name it _extends.scss.
1:02
So first up, most of our layout containers
like the header, footer, and
1:10
content areas share the same text-align:
center style.
1:14
Now, this might be a good time to create
what I call a helper or
1:19
utility placeholder rule we can use on our
project.
1:22
So let's go back to our new extends
partial and
1:26
let's create our first placeholder.
1:30
And it's good to add comments explaining
what's in the file, so
1:32
I'm going to add a comment that says
Center text.
1:35
And let's create a new placeholder rule by
typing a percentage sign,
1:40
and let's call it centered.
1:46
And we'll open up a set of square
brackets.
1:48
So now let's go back to our containers
partial, and let's cut out this
1:51
text-align: center declaration, and let's
remove this group rule altogether.
1:56
And I'll save it.
2:02
Go back to extends.scss.
2:03
And we'll paste the text and
2:06
line declaration inside our centered
placeholder rule.
2:07
All right, so now we can extend this
placeholder and
2:11
some of our layout rules, and it will
always inherit this style.
2:14
So let's go back to our containers
partial.
2:18
And let's scroll down to our
primary-content rule.
2:21
And as our first declaration, let's say
@extend and
2:25
the name of our placeholder, which is
%centered followed by a semicolon.
2:31
All right, so let's copy the extend we
just wrote and
2:38
let's save our containers partial.
2:42
I'm going to close it out for now.
2:44
And let's open up our header partial and
include the extend here as well.
2:46
So again, as the first declaration in our
main header rule, let's go ahead and
2:52
paste in the extend directive.
2:56
So I'll save, close it out, and finally,
3:00
we also need to include it in our footer
component.
3:02
So let's open up the footer partial, and
3:04
up top, paste in our extend.
3:09
All right.
3:12
So let's save it, and close it out.
3:12
So when using placeholders, we need to be
careful which rules are declarations we
3:16
extend because extending a lot of these
single declarations
3:20
can also make things a little difficult to
maintain,
3:25
especially if we're just sort of plugging
these into random rules.
3:28
So sometimes it's okay to repeat a little
to keep the code maintainable.
3:31
Now, in this case, I'm using this as a
utility rule since, as we just saw,
3:36
a few of our layout components need to be
center-aligned.
3:40
But we should also avoid building entire
sections of our site using a bunch of
3:43
single disparate extends].
3:47
So, back in our style.scss partial, let's
scroll up,
3:50
and here we see another repeating style
we're using for creating top borders.
3:55
So we created this style as a sort of
reusable rule.
3:59
So in our Sass project, it makes sense to
turn this into a placeholder helper rule.
4:03
So I'm gonna go ahead and cut out the
border top declaration, and
4:08
I'm going to delete the t-border rule.
4:13
And let's actually delete these stray
comments here and
4:16
we'll go back to our extends partial.
4:20
And right below the one we just wrote,
4:22
let's create another comment that says Top
border.
4:25
And let's create a placeholder called
t-border for top border,
4:29
and inside the placeholder rule, I will
paste in that border top declaration.
4:35
All right, now just like with our centered
placeholder,
4:40
we can extend t-border wherever necessary.
4:44
So for instance, I'm going to copy the
placeholder name and
4:47
let's go inside our container partial.
4:51
And in the primary-content rules, since
the primary-content container
4:55
has a top border, we're going to @extend
the t-border placeholder,
5:00
and we're gonna do the same in our
secondary-content rules.
5:05
Let me go ahead and copy this declaration
and
5:09
paste it as the first declaration in our
secondary-content rule.
5:12
All right, so next when we scroll up,
notice how our primary and
5:20
secondary-content containers also share
these base styles.
5:25
Now, it might be okay to keep these
grouped in one rule,
5:30
like we have here, but let's create a
placeholder rules for these.
5:33
And these can function as base styles for
any layout container we may add later on.
5:37
So, I'm gonna go ahead and select all the
declarations inside this first rule.
5:43
Cut them out.
5:47
Now we can go ahead and delete this top
rule.
5:48
And back in our extends partial right
below the t-border placeholder,
5:53
let's create one more.
5:58
And we're gonna call this Containers.
6:00
[BLANK_AUDIO]
6:02
And let's call our placeholder content.
6:05
So we're going to say %content, a set of
curly braces.
6:08
Then inside, paste in those declarations.
6:13
All right, so now we can extend this
placeholder inside the primary and
6:17
secondary-content rules.
6:20
So let me just go ahead and copy this for
later.
6:22
I will save our extend partial and go back
to our containers partial.
6:24
So first, inside the primary-content rule,
we're going to say @extend content,
6:29
and we'll do the same thing right below in
our secondary-content rule.
6:36
[BLANK_AUDIO]
6:42
All right, so now we can kind of do the
same thing for our columns.
6:46
So if we open up the columns partial, we
can actually cut down the lines of CSS by
6:48
creating a placeholder for the shared
column styles.
6:53
All right, so let's first cut out the
width declaration in our first rule and
6:57
delete it.
7:02
And back in our extends.scss partial,
we'll create another one for our columns.
7:04
And we're gonna call this one Columns.
7:13
So let's say %columns, and
7:14
let's paste in that width declaration.
7:18
All right, so now we can go back to our
columns partial and
7:23
extend the placeholder.
7:27
So we'll say @extend columns and we'll do
the same thing below in our resorts rule.
7:29
All right.
7:39
So we're all set with our columns, so we
can close out our file.
7:39
And finally, let's create one more helper
rule for our Float Clearfix.
7:42
So in our style.scss partial, I'm going to
select and
7:48
cut the Float Clearfix out of here.
7:52
And let's go back to our extends file and
7:57
right below columns, let's add a comment
for Clearfix.
8:00
And this time, I'm going to do things a
little differently.
8:06
So I'm going to create a placeholder, like
we've been doing,
8:08
and we're gonna name it clearfix.
8:11
But this time, inside I'm going to paste
in that clearfix rule.
8:14
And instead of using the group class in
the pseudo element selector here,
8:19
I'm going to replace group with an
ampersand.
8:25
And what this does is it references the
parent selector in a rule.
8:29
So now, instead of going into our HTML and
adding the class group every time we need
8:34
to clear float, we can now extend the
clearfix placeholder wherever necessary.
8:38
So for example, if we open up our
index.html file and
8:45
scroll down, we can see that the
secondary-content
8:48
container needs a clearfix because it has
the class group.
8:51
So now we can go back to our partial file.
8:55
So let's open up the containers partial
and
8:58
extend that clearfix placeholder inside
the secondary-content rule.
9:00
So right beneath the t-border extend,
9:05
let's say @extend clearfix;.
9:10
And now we can actually go back to our
HTML file and
9:14
make sure all the necessary classes have
been removed from the markup.
9:18
So for instance, we can now get rid of the
group class, and
9:21
we can also get rid of this t-border class
since we extended it.
9:25
And if we scroll up to the primary-content
div,
9:30
we can see that it's also using this
t-border class.
9:33
So now we can actually delete it since
we're extending it inside
9:37
the primary-content rule.
9:41
So before we move on, you may have noticed
the error in the console,
9:44
and this is telling us that Sass can't
find those placeholders we just declared.
9:47
Well, that's because we still haven't
imported
9:52
our extends placeholder inside our index
partial.
9:55
So in our index partial, let's go ahead
and import that extend partial.
9:59
So I just go ahead and copy one of these,
and I will paste it in as the last import.
10:03
That way, we avoid specificity issues
later on.
10:09
And then we're going to define the new
partial name.
10:13
So let's type extends.
10:16
And it looks like we're still getting an
error in the console, and
10:20
that's probably because we still need to
save our extends file.
10:23
And there we go.
10:27
Everything looks good.
10:28
So if we go back to our browser and
10:29
refresh, all our styles are back to
normal.
10:31
And we get our nice, clean-looking website
again in the browser.
10:35
So, as we just saw, placeholder selectors
are one of the most
10:40
useful features when refactoring with
Sass.
10:43
But if we're not careful about how we use
them,
10:46
we can accidentally extend unintended code
and bloat our CSS output.
10:49
So I've posted a related video on this in
the teacher's notes,
10:54
so make sure to check that out.
10:57