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
With Sass, we're able to nest selectors in the same visual hierarchy of our HTML. In this video, we'll look for areas in our code where it makes sense to nest rules.
When does it make sense to nest selectors?
When working with namespaced selectors:
.main {
&-heading {
...
}
&-title {
...
}
}
When/if the nested selectors rely on the parent's context. Navigations, for example:
.main-nav {
...
li {
...
}
a {
...
}
}
Quick Reference
Related Videos
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
With Sass, we're able to nest selectors in
the same visual hierarchy of our HTML.
0:00
So now we're gonna look for areas where it
makes sense to nest Sass rules.
0:05
Now, a common misconception a lot of us
just starting out with Sass may have
0:10
is that we must nest all the things,
right?
0:14
So for example, and this is just an
example, we might create a rule like this.
0:17
So let's say secondary-content.
0:21
[BLANK_AUDIO]
0:24
Then inside secondary-content, we'll nest
another rule, so let's say resorts.
0:26
Then inside resorts, we'll nest another
rule, so let's say ul.
0:31
And then inside this rule is where we'll,
for example, declare our color value.
0:36
So now we may be like, hey, this is great.
0:42
I'm writing Sass.
0:44
Well, this kind of nesting isn't always
cool because one of the biggest mistakes
0:46
we can make is nest styles that do not
need to be nested,
0:50
because it can produce really long
selector chains and
0:54
create lots of needless specificity in our
selectors.
0:57
We may think that it allows for better
code organization,
1:02
which it does in some cases.
1:05
But really, lots of nesting equals bloat.
1:06
Now, the good thing is that we originally
wrote our CSS without any
1:10
parent dependencies, so we don't really
need to nest selectors here.
1:14
So, that's why usually try to avoid
nesting unless it makes sense, and
1:18
I'll show you where it makes sense to nest
rules in our project.
1:22
So here in our base.scss partial, the
first place where it might make
1:26
sense to nest rules is down below in our
link rules.
1:31
So with Sass, we can reference the current
parent selector in a nested rule
1:37
using the ampersand symbol,
1:42
as we saw in the previous video when we
built that clearfix placeholder.
1:44
So first, let's create a new rule that
targets the a or anchor element.
1:48
So we're gonna type a followed by a set of
curly braces.
1:55
Then, inside this rule we're going to nest
the rules for link, visited and hover.
1:59
I'm actually gonna remove the active state
from our project, but
2:05
you can leave it in if you want.
2:07
So I'm just gonna delete active, and I'm
gonna go ahead and
2:09
select and cut the link, visited, and
hover rules.
2:13
Then paste them inside the new a rule.
2:17
Let me clean things up a little bit.
2:22
[BLANK_AUDIO]
2:23
And now, to reference the parent selector
in this rule,
2:27
we can replace the a selector and all the
nested rules with the ampersand.
2:31
[BLANK_AUDIO]
2:37
And once we save and compile our Sass,
2:41
let's open up our application.css file, so
our CSS output.
2:44
And when we scroll down, we can see how
Sass outputs them as separate rules.
2:49
So now you may be thinking, well, isn't
that what we already had to begin with?
2:55
Why did we have to rewrite everything just
so
2:59
we can output what we'd already written?
3:01
And that is a valid point.
3:04
Now, even though we're not nesting these
rules to mimic any sort of
3:06
HTML hierarchy or because there is a
parent dependency, I still like to keep
3:10
these related selectors nicely organized
under one rule whenever possible.
3:15
So, in Sass we can now use a parent
selector to append a suffix to a selector.
3:21
And this is especially useful when working
with named space class selectors.
3:28
So for instance, inside the components
directory,
3:32
we'll bring up the typography partial.
3:37
And when we scroll down, we can see how we
have
3:40
classes with the name main-heading and
main-title.
3:43
So, we can actually nest rules under this
3:48
main namespace similar to how we defined
our link rules.
3:51
Now, this is just a simple example, but
3:56
in a larger project, we may have a long
list of namespace rules.
3:58
So, we can make things a little more
modular and maintainable with nesting.
4:02
So first, I'm going to create a new rule
with the class selector main.
4:07
And I'm going to select and cut the
main-title and
4:14
main-heading rules, and paste them inside
this new rule.
4:18
[BLANK_AUDIO]
4:24
Let me just move this down so we can see
this a little better.
4:29
And now we can replace the main classes in
our nested rules with the ampersand.
4:33
So first I'm going to replace
.main-heading with &-heading, and right
4:39
below that, I'm going to replace main in
the main-title class with an ampersand.
4:44
All right, so now if we save and compile
our Sass and bring up our output CSS,
4:51
wes ee how that ampersand selector sort of
undoes the nesting in the Sass rules and
4:57
outputs them as separate selectors without
making them descendents of any selector,
5:03
as we can see here.
5:08
So remember, don't nest everything into
everything just because you can.
5:09
Or don't just nest because it's a cool
Sass thing to do.
5:15
Only nest if it makes sense.
5:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up