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