1
00:00:00,640 --> 00:00:05,002
Sometimes you'll want one selector to
share the styles of another selector.

2
00:00:05,002 --> 00:00:08,230
Sass has an extend directive that
works similarly to mixins in

3
00:00:08,230 --> 00:00:11,760
that you're able to share snippets
of code across your stylesheets.

4
00:00:11,760 --> 00:00:13,580
Extend is a useful directive for

5
00:00:13,580 --> 00:00:17,780
sharing sets of related properties
that get repeated in your stylesheets.

6
00:00:17,780 --> 00:00:22,620
Button sets, for example,
share many of the same CSS properties.

7
00:00:22,620 --> 00:00:27,320
When you launch the latest workspace with
this video, in the component styles,

8
00:00:27,320 --> 00:00:32,910
you'll see that the btn-callout and
btn-info rules share many of the same

9
00:00:32,910 --> 00:00:38,640
styles for color, display, font-weight,
text-decoration, and a few others.

10
00:00:38,640 --> 00:00:43,630
Writing these properties over and
over again for every button is incredibly

11
00:00:43,630 --> 00:00:47,130
tedious and repetitive and
could become a maintenance nightmare.

12
00:00:47,130 --> 00:00:52,247
So in plain CSS,
you might create a button class that

13
00:00:52,247 --> 00:00:57,607
abstracts all the base styles
of a button for example.

14
00:01:02,138 --> 00:01:06,721
Then below, you'll define different
modifier classes, like .btn-callout,

15
00:01:06,721 --> 00:01:10,725
font-size: 1.1em,
background-color: $color-secondary.

16
00:01:10,725 --> 00:01:15,631
Then .btn-info with just the font-size,
background-color, and

17
00:01:15,631 --> 00:01:17,600
margin-top decorations.

18
00:01:17,600 --> 00:01:22,430
Then over in your HTML,
you give your button element or

19
00:01:22,430 --> 00:01:29,045
a tag the base button class and
the one modifier class, for btn-callout.

20
00:01:29,045 --> 00:01:34,200
Well, this works fine and it's a much
drier approach than the first example.

21
00:01:35,430 --> 00:01:42,038
And you might also group all the button
selectors that share the same styles,

22
00:01:42,038 --> 00:01:47,530
for example you'll group
.btn-callout with .btn-info and

23
00:01:47,530 --> 00:01:52,321
one rule and
have all the variations in separate rules.

24
00:01:52,321 --> 00:01:56,790
Doing this requires just one
class on your btn element,

25
00:01:56,790 --> 00:02:00,225
which makes your HTML more maintainable.

26
00:02:05,541 --> 00:02:07,290
That looks good.

27
00:02:07,290 --> 00:02:10,560
Well there's an even
easier way with extend.

28
00:02:10,560 --> 00:02:14,169
So let's bring back our button class and
our style sheet.

29
00:02:16,050 --> 00:02:20,556
The extend directive will allow other
selectors like .btn-callout and

30
00:02:20,556 --> 00:02:24,680
.btn-info to inherit
the properties of button.

31
00:02:24,680 --> 00:02:29,256
So inside each button modifier rule,

32
00:02:29,256 --> 00:02:34,261
let's add @extend followed by the class

33
00:02:34,261 --> 00:02:38,696
we want to extend, in this case btn.

34
00:02:38,696 --> 00:02:45,233
I'll copy the directive from .btn-callout
and paste it inside .btn-info.

35
00:02:45,233 --> 00:02:50,537
So here extend is instructing Sass,
hey Sass I want .btn

36
00:02:50,537 --> 00:02:55,632
to share its styles with btn-callout and
btn-info.

37
00:02:55,632 --> 00:03:00,588
Save your Sass file and you'll see
that the output is just like the CSS

38
00:03:00,588 --> 00:03:03,664
we wrote earlier, the extend directive,

39
00:03:03,664 --> 00:03:08,363
group the selectors that share
the same styles into one rule, and

40
00:03:08,363 --> 00:03:12,590
place the selector-specific
styles in separate rules.

41
00:03:12,590 --> 00:03:16,010
So in other words,
all the base styles defined

42
00:03:16,010 --> 00:03:20,851
here in the button rule are now
applied to .btn-callout and .btn-info.

43
00:03:22,330 --> 00:03:26,150
Whereas the include directive you
learned about earlier clones the code

44
00:03:26,150 --> 00:03:31,190
inside of mixin and duplicates it in
the CSS output over and over again.

45
00:03:31,190 --> 00:03:34,570
Extend makes the output more compact

46
00:03:34,570 --> 00:03:37,800
by grouping the selectors that
share the same properties.

47
00:03:37,800 --> 00:03:40,850
But we can make our output even simpler.

48
00:03:40,850 --> 00:03:45,890
Notice how extend outputs the button
class in the selector group.

49
00:03:45,890 --> 00:03:48,980
Well, we're no longer going
to use this class by itself.

50
00:03:48,980 --> 00:03:53,290
Because moving forward, we'll style once
we're using just the named space classes.

51
00:03:53,290 --> 00:03:55,890
So let's not have it clutter our CSS.

52
00:03:55,890 --> 00:03:58,950
In the next video, I'll teach you how
to make it disappear from the output

53
00:03:58,950 --> 00:04:00,810
with a place holder selector.

54
00:04:00,810 --> 00:04:04,720
I also included more example of extending
selector in the teacher's notes.