WEBVTT

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.