~5 Nesting~
5/20/2024
To turn back on your Watch SASS
Writing a Class instead of targeting the class directly
Using the Shortcut of Ampersand $ when nesting
What is Nesting?
Nesting is something which is considered by some to be one of the best things with SASS, but depending on how large the file is, you should be careful with using too much nesting.
Let’s take a look at our paragraph in the html file. You will see that we have a div, and that div has a class of main.
To turn back on your Watch SASS
You might have to pull your webpage layout out wider to see the Watch icon or go back to settings, put SASS in the search bar, and go to the wheel here
At the bottom, choose WATCH SASS
If your file is watching SASS
Go to your SCSS file
You will want to add this next code directly under your code that you wrote for the body in the scss file.
.main {
width: 75%;
margin: 0 auto;
}
You will see this written in your regular CSS
This is how you Nest
Back to the main.SCSS file
When you nest, you can go inside of the rule that you just wrote for .main, and add these style properties to them. We want to target that paragraph in the html that we saw in the .main rule.
.main {
width: 75%;
margin: 0 auto;
p {
font-weight:map-get($font-weights, bold);
}
}
Look at what it wrote in the regular CSS file for us, when we made those changes in SCSS.
Go to the html file to test it, remember you will only get the file structure if you try to view the main.css file.
View it with the Live Server
And our text is now bold
Writing a Class instead of targeting the class directly
Go back to the SCSS and erase that part that we just wrote and change it to a class.
.main {
width: 75%;
margin: 0 auto;
.main__p {
font-weight:map-get($font-weights, bold);
}
}
Remember that with a class we also have to change it in the html to have a class attached to the paragraph. Add the class of main__p to your paragraph tag.
Using the Shortcut of Ampersand $ when nesting
Look at how we used it in the SCSS
We can also write our SCSS code like this with the ampersand.
.main {
width: 75%;
margin: 0 auto;
&__p {
font-weight:map-get($font-weights, bold);
}
}
But to actually write this ampersand thing out right, we need to have a pound sign before it and then wrap the ampersand in curly braces like this. Oh, and we are also adding a hover.
.main {
width: 75%;
margin: 0 auto;
#{&}__p {
font-weight:map-get($font-weights, bold);
&:hover {
color:chocolate;
}
}
}
Our regular CSS code will compile to this:
Go to the HTML file to view this in the browser
Live Server
And this is what it looks like:
and when we hover:
Our Regular CSS code will look like this.
