1
00:00:00,680 --> 00:00:05,190
In the previous video, we used the extend
directive to instruct Sass to share

2
00:00:05,190 --> 00:00:10,160
the button styles with button callout and
button info.

3
00:00:10,160 --> 00:00:12,530
When you extend normal
selectors like classes and

4
00:00:12,530 --> 00:00:16,330
IDs, they'll always get output to CSS.

5
00:00:16,330 --> 00:00:19,320
However, sometimes those
selectors are never actually used

6
00:00:19,320 --> 00:00:20,820
to style the elements of a page.

7
00:00:20,820 --> 00:00:25,620
For example, we'll likely never use
the button class directly in HTML.

8
00:00:25,620 --> 00:00:27,600
So it's best to omit it from the output.

9
00:00:27,600 --> 00:00:30,630
Now just one unused class
is not that big a deal.

10
00:00:30,630 --> 00:00:33,540
But if we extended multiple selectors,
we could end up creating

11
00:00:33,540 --> 00:00:36,080
lots of unnecessary CSS and
bloat in the final output.

12
00:00:37,210 --> 00:00:41,980
So Sass has a special type of selector
called a placeholder selector

13
00:00:41,980 --> 00:00:46,200
that won't appear in the CSS
output unless it's extended.

14
00:00:46,200 --> 00:00:49,330
You create a placeholder selector
by placing a percent sign

15
00:00:49,330 --> 00:00:50,660
in front of the selector name.

16
00:00:50,660 --> 00:00:54,720
So let's turn the button class
selector into a placeholder

17
00:00:54,720 --> 00:00:57,900
by replacing the period
with a percent sign.

18
00:00:59,720 --> 00:01:04,775
And we also need to change
the extends to @extend %btn.

19
00:01:07,590 --> 00:01:12,980
Placeholder selectors never get output to
CSS unless extended from within a rules.

20
00:01:12,980 --> 00:01:17,761
So if I quickly comment out
the two extends [SOUND].

21
00:01:17,761 --> 00:01:19,277
And compile my changes,

22
00:01:19,277 --> 00:01:23,510
you'll see the button rule completely
disappear from the output.

23
00:01:23,510 --> 00:01:25,440
The percent symbol makes it invisible.

24
00:01:25,440 --> 00:01:26,680
Add the extends back in.

25
00:01:28,710 --> 00:01:31,310
Now the button class is
gone from the output.

26
00:01:31,310 --> 00:01:36,410
And the selector group contains only
the classes using the extend directive,

27
00:01:36,410 --> 00:01:38,110
button call out and button info.

28
00:01:38,110 --> 00:01:41,640
So this is one of the main reasons
why developers often extend on

29
00:01:41,640 --> 00:01:44,490
place holders instead
of regular selectors.

30
00:01:44,490 --> 00:01:47,180
It's considered a best practice in Sass.

31
00:01:47,180 --> 00:01:52,790
While we're at it let's bring back the
nested button rules for call out and info.

32
00:01:52,790 --> 00:01:56,470
So I'll create a rule
using the class button

33
00:01:58,170 --> 00:02:01,370
then nest the call out and info modifiers.

34
00:02:02,850 --> 00:02:06,346
Replacing the button prefix
with the ampersand symbol.

35
00:02:20,306 --> 00:02:23,498
Place holder selectors are not only
useful for simple base styles,

36
00:02:23,498 --> 00:02:27,418
they're also useful for utility styles or
sets of related properties that you'll

37
00:02:27,418 --> 00:02:30,940
reuse in different places
without creating extra output.

38
00:02:30,940 --> 00:02:33,530
So for example, if you're building
a float-based layout, you can

39
00:02:33,530 --> 00:02:37,780
create a clearfixed place holder selector
that clears your floats when extended.

40
00:02:40,420 --> 00:02:43,460
Now, placeholders also
support nested selectors.

41
00:02:43,460 --> 00:02:48,400
So here I'll nest the &after
pseudoelement selector with the usual

42
00:02:48,400 --> 00:02:50,480
clearfix declarations.

43
00:02:50,480 --> 00:02:54,634
And then we can extend the clearfix
placeholder wherever you need to clear

44
00:02:54,634 --> 00:02:55,175
floats.

45
00:02:57,131 --> 00:03:00,980
Placeholders even share nested
rules with other selectors.

46
00:03:00,980 --> 00:03:02,890
And this can be useful
with pseudo classes.

47
00:03:02,890 --> 00:03:05,660
So for example we can define hover and
active styles for

48
00:03:05,660 --> 00:03:07,260
all buttons In one place.

49
00:03:07,260 --> 00:03:15,730
So in the button placeholder rule,
I'll nest the ampersand hover selector.

50
00:03:15,730 --> 00:03:19,650
And inside the rule,
let's set the color to the variable white.

51
00:03:20,860 --> 00:03:24,600
And the opacity value to 0.8.

52
00:03:24,600 --> 00:03:29,930
Then right below,
I'll create another rule for

53
00:03:29,930 --> 00:03:32,926
active, using &active.

54
00:03:37,733 --> 00:03:40,028
And here I'll set the opacity
value to initial.

55
00:03:43,310 --> 00:03:47,045
This will output two sets
of group selectors, one for

56
00:03:47,045 --> 00:03:51,201
the shared hover styles and
another for the active styles.

57
00:03:58,964 --> 00:04:02,566
All right so now that you're getting
the hang of extend it's good to know its

58
00:04:02,566 --> 00:04:06,395
limitations and some of the ways over
extending can produce undesirable effects

59
00:04:06,395 --> 00:04:08,860
in your output if you're not careful.

60
00:04:08,860 --> 00:04:15,111
So for example it's best to
avoid extending from a group of

61
00:04:15,111 --> 00:04:21,374
selectors like icon, card,
call out, info, and so on.

62
00:04:21,374 --> 00:04:25,500
So what this does is it will extend
all occurences of each selector.

63
00:04:25,500 --> 00:04:29,410
Now so you can see here in the output
CSS this can quickly make the final

64
00:04:29,410 --> 00:04:31,070
output messy.

65
00:04:31,070 --> 00:04:34,260
But some, often,
referred to this as selector explosion.

66
00:04:34,260 --> 00:04:35,856
So keep your extends simple.

67
00:04:38,794 --> 00:04:41,773
Now, it's okay to use
the extend directive for

68
00:04:41,773 --> 00:04:44,770
a simple button set like
the one we created.

69
00:04:44,770 --> 00:04:47,230
But if you find yourself
extending a placeholder or

70
00:04:47,230 --> 00:04:49,790
selector from multiple
places in your style sheet.

71
00:04:49,790 --> 00:04:52,070
It's best to use a mixin instead.

72
00:04:52,070 --> 00:04:54,760
You can often achieve the same
results to the mixin without creating

73
00:04:54,760 --> 00:04:58,450
long awkward groupings of unrelated
selectors in your output.

74
00:04:58,450 --> 00:05:01,780
I posted links to resources and treehouse
videos that help you best practices for

75
00:05:01,780 --> 00:05:03,450
using extend in the teachers notes.