We use cookies to enhance your experience on the site

Nesting in Sass

Nesting is one of the most powerful features of Sass, allowing you to nest selectors inside other selectors. This means we can structurally and logically organize our CSS styles in a way that more closely mirrors the HTML structure.

Basic Nesting

For example, instead of writing:

1nav {
2  width: 100%;
3}
4
5nav ul {
6  list-style: none;
7}
8
9nav ul li {
10  display: inline-block;
11}

We can write it in Sass as:

1nav {
2  width: 100%;
3
4  ul {
5    list-style: none;
6
7    li {
8      display: inline-block;
9    }
10  }
11}

As you can see, selectors in Sass are nested in the same way as HTML elements on the page. This makes the code more readable and easier to maintain.

Ampersand (&)

In Sass, the ampersand (&) is used to reference the parent selector. It can be very useful when you want to define styles for hover, active, or a specific class for a given element.

For example:

1button {
2  background-color: blue;
3  color: white;
4
5  &:hover {
6    background-color: darkblue;
7  }
8
9  &.primary {
10    background-color: red;
11  }
12}

After compiling to CSS, we get:

1button {
2  background-color: blue;
3  color: white;
4}
5
6button:hover {
7  background-color: darkblue;
8}
9
10button.primary {
11  background-color: red;
12}

Warning

Although nesting is a powerful tool, it should be used in moderation. Nesting too deeply can lead to generating complex and overly specific selectors, which makes the code harder to maintain and can cause unexpected style behavior. A good practice is to avoid nesting deeper than 3 levels.

Remember that Sass is a tool designed to help create better, more organized, and easier-to-manage CSS code. Always try to use its features in a way that best benefits your project.

Exercise: Nesting in Sass

Your task is to create an organized and responsive web page layout using Sass nesting. In this exercise, you will use basic nesting, the ampersand (&), and ensure code readability and organization.

Exercise Goals

Create a header with a nested navigation menu.
Create a section with cards that change style on hover.
Create a footer with nested contact elements.
Ensure responsiveness and Sass code readability.

Step 1: HTML Structure

First, create an HTML file with the following structure:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Nesting in Sass</title>
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10  <header class="main-header">
11    <h1>My Website</h1>
12    <nav>
13      <ul>
14        <li><a href="#">Home</a></li>
15        <li><a href="#">About Us</a></li>
16        <li><a href="#">Contact</a></li>
17      </ul>
18    </nav>
19  </header>
20  <section class="cards-section">
21    <div class="card">
22      <h2>Card 1</h2>
23      <p>Card 1 description.</p>
24    </div>
25    <div class="card">
26      <h2>Card 2</h2>
27      <p>Card 2 description.</p>
28    </div>
29    <div class="card">
30      <h2>Card 3</h2>
31      <p>Card 3 description.</p>
32    </div>
33  </section>
34  <footer class="main-footer">
35    <p>&copy; 2023 My Website</p>
36    <div class="contact-info">
37      <p>Email: contact@mywebsite.com</p>
38      <p>Phone: +1 234 567 890</p>
39    </div>
40  </footer>
41</body>
42</html>

Step 2: Sass Styles

Now create a Sass file (styles.scss) and add the following styles with nesting:

1/* Basic styles */
2body {
3  font-family: Arial, sans-serif;
4  margin: 0;
5  padding: 0;
6  background-color: #f0f0f0;
7}
8
9.main-header {
10  background-color: #333;
11  color: #fff;
12  padding: 20px;
13  text-align: center;
14
15  nav {
16    ul {
17      list-style: none;
18      padding: 0;
19
20      li {
21        display: inline-block;
22        margin: 0 10px;
23
24        a {
25          color: #fff;
26          text-decoration: none;
27
28          &:hover {
29            text-decoration: underline;
30          }
31        }
32      }
33    }
34  }
35}
36
37.cards-section {
38  display: flex;
39  justify-content: space-around;
40  padding: 20px;
41
42  .card {
43    background-color: #fff;
44    border: 1px solid #ccc;
45    padding: 20px;
46    width: 30%;
47    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
48
49    h2 {
50      margin-top: 0;
51    }
52
53    &:hover {
54      background-color: #f9f9f9;
55      transform: scale(1.05);
56      transition: all 0.3s ease;
57    }
58  }
59}
60
61.main-footer {
62  background-color: #333;
63  color: #fff;
64  padding: 20px;
65  text-align: center;
66
67  .contact-info {
68    p {
69      margin: 5px 0;
70
71      &:first-child {
72        font-weight: bold;
73      }
74    }
75  }
76}

Step 3: Compiling Sass

Use a Sass compilation tool (e.g., node-sass, Dart Sass, or your editor's preprocessor) to generate the CSS file (styles.css) from the Sass file (styles.scss).

Step 4: Testing

Open the HTML file in a browser to see the effects of Sass nesting. Make sure all styles work as expected.

Exercise

Expanding the Navigation Menu: Add a submenu to one of the navigation items (
```
<nav>
```
) that appears on hover. Style the submenu using nesting.
Card Animation: Add animation to the cards (
```
.card
```
) using
```
@keyframes
```
and
```
animation
```
. The animation should gently move the cards up and down.
Responsiveness: Add nested media queries to make the layout responsive. For example, set the cards (
```
.card
```
) to 100% width on smaller screens.
Footer Styling: Expand the footer (
```
.main-footer
```
) styling by adding nested styles for social media links that will appear in the footer.

Use all the presented nesting techniques to create a well-organized, readable, and responsive web page layout.

Go to CodeWorlds→