- Nested Selectors 7:23
- Use the Ampersand to Reference Parent Selectors 6:57
- Write Nested Selectors 4 objectives
- Introducing Mixins 6:53
- Pass Content Blocks to Mixins 4:42
- Write a Mixin 4 objectives
- Extend the Properties of Selectors 4:05
- Extend Placeholder Selectors 5:04
- Practice Extending a Selector 3 objectives
- Using Comments 3:40
- Sass Workflow Review 7 questions
Preview
Video Player
00:00
00:00
Extend Placeholder Selectors
5:04When 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.
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