Nesting

In this lesson, we'll be introducing the SASS nesting syntax.

We'll cover the following

When you observe the structure of an HTML file, you’ll notice it has a very clear hierarchy:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

As you can see, HTML has a structure that makes it quite easy to read.

CSS, on the other hand, lacks this visual structure. Which is why it has a tendency to become disorganized quite quickly. Enter Sass nesting!

Definition

Using nesting, we can nest child selectors inside of the parent selector.

This results in much cleaner and less repetitive code.

Example

Take the following HTML:

<nav class="navbar">
  <ul>
    <li>Home</li>
    <li>Store</li>
    <li>Contact Us</li>
  </ul>
</nav>

Using regular CSS, we would write this like so:

Get hands-on with 1200+ tech skills courses.