"Build a Weather App" was retired on July 14, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Sass Basics!
You have completed Sass Basics!
Preview
When you extend regular selectors, like classes and IDs, they get output to CSS. Sass has a special type of selector, called a placeholder selector, that won't appear in the CSS output unless extended.
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
In the previous video, we used the extend
directive to instruct Sass to share
0:00
the button styles with button callout and
button info.
0:05
When you extend normal
selectors like classes and
0:10
IDs, they'll always get output to CSS.
0:12
However, sometimes those
selectors are never actually used
0:16
to style the elements of a page.
0:19
For example, we'll likely never use
the button class directly in HTML.
0:20
So it's best to omit it from the output.
0:25
Now just one unused class
is not that big a deal.
0:27
But if we extended multiple selectors,
we could end up creating
0:30
lots of unnecessary CSS and
bloat in the final output.
0:33
So Sass has a special type of selector
called a placeholder selector
0:37
that won't appear in the CSS
output unless it's extended.
0:41
You create a placeholder selector
by placing a percent sign
0:46
in front of the selector name.
0:49
So let's turn the button class
selector into a placeholder
0:50
by replacing the period
with a percent sign.
0:54
And we also need to change
the extends to @extend %btn.
0:59
Placeholder selectors never get output to
CSS unless extended from within a rules.
1:07
So if I quickly comment out
the two extends [SOUND].
1:12
And compile my changes,
1:17
you'll see the button rule completely
disappear from the output.
1:19
The percent symbol makes it invisible.
1:23
Add the extends back in.
1:25
Now the button class is
gone from the output.
1:28
And the selector group contains only
the classes using the extend directive,
1:31
button call out and button info.
1:36
So this is one of the main reasons
why developers often extend on
1:38
place holders instead
of regular selectors.
1:41
It's considered a best practice in Sass.
1:44
While we're at it let's bring back the
nested button rules for call out and info.
1:47
So I'll create a rule
using the class button
1:52
then nest the call out and info modifiers.
1:58
Replacing the button prefix
with the ampersand symbol.
2:02
Place holder selectors are not only
useful for simple base styles,
2:20
they're also useful for utility styles or
sets of related properties that you'll
2:23
reuse in different places
without creating extra output.
2:27
So for example, if you're building
a float-based layout, you can
2:30
create a clearfixed place holder selector
that clears your floats when extended.
2:33
Now, placeholders also
support nested selectors.
2:40
So here I'll nest the &after
pseudoelement selector with the usual
2:43
clearfix declarations.
2:48
And then we can extend the clearfix
placeholder wherever you need to clear
2:50
floats.
2:54
Placeholders even share nested
rules with other selectors.
2:57
And this can be useful
with pseudo classes.
3:00
So for example we can define hover and
active styles for
3:02
all buttons In one place.
3:05
So in the button placeholder rule,
I'll nest the ampersand hover selector.
3:07
And inside the rule,
let's set the color to the variable white.
3:15
And the opacity value to 0.8.
3:20
Then right below,
I'll create another rule for
3:24
active, using &active.
3:29
And here I'll set the opacity
value to initial.
3:37
This will output two sets
of group selectors, one for
3:43
the shared hover styles and
another for the active styles.
3:47
All right so now that you're getting
the hang of extend it's good to know its
3:58
limitations and some of the ways over
extending can produce undesirable effects
4:02
in your output if you're not careful.
4:06
So for example it's best to
avoid extending from a group of
4:08
selectors like icon, card,
call out, info, and so on.
4:15
So what this does is it will extend
all occurences of each selector.
4:21
Now so you can see here in the output
CSS this can quickly make the final
4:25
output messy.
4:29
But some, often,
referred to this as selector explosion.
4:31
So keep your extends simple.
4:34
Now, it's okay to use
the extend directive for
4:38
a simple button set like
the one we created.
4:41
But if you find yourself
extending a placeholder or
4:44
selector from multiple
places in your style sheet.
4:47
It's best to use a mixin instead.
4:49
You can often achieve the same
results to the mixin without creating
4:52
long awkward groupings of unrelated
selectors in your output.
4:54
I posted links to resources and treehouse
videos that help you best practices for
4:58
using extend in the teachers notes.
5:01
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