With Sass, we're able to nest selectors in the same visual hierarchy of our HTML.

So now we're gonna look for areas where it makes sense to nest Sass rules.

Now, a common misconception a lot of us just starting out with Sass may have

is that we must nest all the things, right?

So for example, and this is just an example, we might create a rule like this.

So let's say secondary-content.

[BLANK_AUDIO]

Then inside secondary-content, we'll nest another rule, so let's say resorts.

Then inside resorts, we'll nest another rule, so let's say ul.

And then inside this rule is where we'll, for example, declare our color value.

So now we may be like, hey, this is great.

I'm writing Sass.

Well, this kind of nesting isn't always cool because one of the biggest mistakes

we can make is nest styles that do not need to be nested,

because it can produce really long selector chains and

create lots of needless specificity in our selectors.

We may think that it allows for better code organization,

which it does in some cases.

But really, lots of nesting equals bloat.

Now, the good thing is that we originally wrote our CSS without any

parent dependencies, so we don't really need to nest selectors here.

So, that's why usually try to avoid nesting unless it makes sense, and

I'll show you where it makes sense to nest rules in our project.

So here in our base.scss partial, the first place where it might make

sense to nest rules is down below in our link rules.

So with Sass, we can reference the current parent selector in a nested rule

using the ampersand symbol,

as we saw in the previous video when we built that clearfix placeholder.

So first, let's create a new rule that targets the a or anchor element.

So we're gonna type a followed by a set of curly braces.

Then, inside this rule we're going to nest the rules for link, visited and hover.

I'm actually gonna remove the active state from our project, but

you can leave it in if you want.

So I'm just gonna delete active, and I'm gonna go ahead and

select and cut the link, visited, and hover rules.

Then paste them inside the new a rule.

Let me clean things up a little bit.

[BLANK_AUDIO]

And now, to reference the parent selector in this rule,

we can replace the a selector and all the nested rules with the ampersand.

[BLANK_AUDIO]

And once we save and compile our Sass,

let's open up our application.css file, so our CSS output.

And when we scroll down, we can see how Sass outputs them as separate rules.

So now you may be thinking, well, isn't that what we already had to begin with?

Why did we have to rewrite everything just so

we can output what we'd already written?

And that is a valid point.

Now, even though we're not nesting these rules to mimic any sort of

HTML hierarchy or because there is a parent dependency, I still like to keep

these related selectors nicely organized under one rule whenever possible.

So, in Sass we can now use a parent selector to append a suffix to a selector.

And this is especially useful when working with named space class selectors.

So for instance, inside the components directory,

we'll bring up the typography partial.

And when we scroll down, we can see how we have

classes with the name main-heading and main-title.

So, we can actually nest rules under this

main namespace similar to how we defined our link rules.

Now, this is just a simple example, but

in a larger project, we may have a long list of namespace rules.

So, we can make things a little more modular and maintainable with nesting.

So first, I'm going to create a new rule with the class selector main.

And I'm going to select and cut the main-title and

main-heading rules, and paste them inside this new rule.

[BLANK_AUDIO]

Let me just move this down so we can see this a little better.

And now we can replace the main classes in our nested rules with the ampersand.

So first I'm going to replace .main-heading with &-heading, and right

below that, I'm going to replace main in the main-title class with an ampersand.

All right, so now if we save and compile our Sass and bring up our output CSS,

wes ee how that ampersand selector sort of undoes the nesting in the Sass rules and

outputs them as separate selectors without making them descendents of any selector,

as we can see here.

So remember, don't nest everything into everything just because you can.

Or don't just nest because it's a cool Sass thing to do.

Only nest if it makes sense.