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
Next, we'll find repeating patterns in our code and extract them into placeholder selectors.
Quick Reference
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 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
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