Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Sometimes you'll want one selector to share the styles of another selector. The @extend directive works like mixins in that you're able to share snippets of code across your stylesheets. @extend is a useful directive for sharing sets of related properties that get repeated in your stylesheets.
Resources
-
0:00
Sometimes you'll want one selector to share the styles of another selector.
-
0:05
SaaS has an extend directive that works similarly to mixins in
-
0:08
that you're able to share snippets of code across your stylesheets.
-
0:11
Extend is a useful directive for
-
0:13
sharing sets of related properties that get repeated in your stylesheets.
-
0:17
Button sets, for example, share many of the same CSS properties.
-
0:22
When you launch the latest workspace with this video, in the component styles,
-
0:27
you'll see that the btn-callout and btn-info rules share many of the same
-
0:32
styles for color, display, font-weight, text-decoration, and a few others.
-
0:38
Writing these properties over and over again for every button is incredibly
-
0:43
tedious and repetitive and could become a maintenance nightmare.
-
0:47
So in plain CSS, you might create a button class that
-
0:52
abstracts all the base styles of a button for example.
-
1:02
Then below, you'll define different modifier classes, like .btn-callout,
-
1:06
font-size: 1.1em, background-color: $color-secondary.
-
1:10
Then .btn-info with just the font-size, background-color, and
-
1:15
margin-top decorations.
-
1:17
Then over in your HTML, you give your button element or
-
1:22
a tag the base button class and the one modifier class, for btn-callout.
-
1:29
Well, this works fine and it's a much drier approach than the first example.
-
1:35
And you might also group all the button selectors that share the same styles,
-
1:42
for example you'll group .btn-callout with .btn-info and
-
1:47
one rule and have all the variations in separate rules.
-
1:52
Doing this requires just one class on your btn element,
-
1:56
which makes your HTML more maintainable.
-
2:05
That looks good.
-
2:07
Well there's an even easier way with extend.
-
2:10
So let's bring back our button class and our style sheet.
-
2:16
The extend directive will allow other selectors like .btn-callout and
-
2:20
.btn-info to inherit the properties of button.
-
2:24
So inside each button modifier rule,
-
2:29
let's add @extend followed by the class
-
2:34
we want to extend, in this case btn.
-
2:38
I'll copy the directive from .btn-callout and paste it inside .btn-info.
-
2:45
So here extend is instructing SaaS, hey SaaS I want .btn
-
2:50
to share its styles with btn-callout and btn-info.
-
2:55
Save your SaaS file and you'll see that the output is just like the CSS
-
3:00
we wrote earlier, the extend directive,
-
3:03
group the selectors that share the same styles into one rule, and
-
3:08
place the selector-specific styles in separate rules.
-
3:12
So in other words, all the base styles defined
-
3:16
here in the button rule are now applied to .btn-callout and .btn-info.
-
3:22
Whereas the include directive you learned about earlier clones the code
-
3:26
inside of mixin and duplicates it in the CSS output over and over again.
-
3:31
Extend makes the output more compact
-
3:34
by grouping the selectors that share the same properties.
-
3:37
But we can make our output even simpler.
-
3:40
Notice how extend outputs the button class in the selector group.
-
3:45
Well, we're no longer going to use this class by itself.
-
3:48
Because moving forward, we'll style once we're using just the named space classes.
-
3:53
So let's not have it clutter our CSS.
-
3:55
In the next video, I'll teach you how to make it disappear from the output
-
3:58
with a place holder selector.
-
4:00
I also included more example of extending selector in the teacher's notes.
You need to sign up for Treehouse in order to download course files.
Sign up