Nesting in SASS

This article explains nesting in SASS.

We will explain SASS nesting step by step, including sample code to deepen your understanding.

YouTube Video

Nesting in SASS

SASS is an extended stylesheet language for CSS that offers many features for efficient styling. Among these, nesting is a particularly useful feature for visually representing the hierarchical structure of CSS.

Basics of Nesting

In SASS, you can organize your code visually by writing CSS selectors in a hierarchical structure. For example, let's see how you can rewrite the following CSS code using nesting.

 1/* CSS */
 2.nav {
 3    background-color: #333;
 4}
 5.nav ul {
 6    margin: 0;
 7    padding: 0;
 8}
 9.nav ul li {
10    list-style: none;
11}
12.nav ul li a {
13    color: #fff;
14    text-decoration: none;
15}

Using SASS, you can write this code concisely with nesting as shown below.

 1/* SASS */
 2.nav {
 3    background-color: #333;
 4
 5    ul {
 6        margin: 0;
 7        padding: 0;
 8
 9        li {
10            list-style: none;
11
12            a {
13                color: #fff;
14                text-decoration: none;
15            }
16        }
17    }
18}

• This code uses the nesting feature in SASS to describe the navigation menu styles concisely and hierarchically. By using nesting, the parent-child relationships become visually clear and readability improves.

Referencing Parent Selectors (&)

When you need to reference the parent selector within nested styles, use &. This allows you to create selectors with specific states or modifiers.

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4
 5    &:hover {
 6        background-color: #0056b3;
 7    }
 8
 9    &:active {
10        background-color: #003f7f;
11    }
12}

• This code uses & in SCSS to define the :hover and :active states for the parent .button selector.

Generated CSS

 1.button {
 2    background-color: #007bff;
 3    color: #fff;
 4}
 5.button:hover {
 6    background-color: #0056b3;
 7}
 8.button:active {
 9    background-color: #003f7f;
10}

Nesting Media Queries

In SASS, you can nest media queries as well. This allows you to implement responsive design while maintaining the relevance of your styles.

 1.container {
 2    width: 100%;
 3
 4    @media (min-width: 768px) {
 5        width: 750px;
 6    }
 7
 8    @media (min-width: 1024px) {
 9        width: 970px;
10    }
11}

• This code nests a media query within the .container class, enabling a responsive design that changes width based on screen size.

Generated CSS

 1.container {
 2    width: 100%;
 3}
 4@media (min-width: 768px) {
 5    .container {
 6        width: 750px;
 7    }
 8}
 9@media (min-width: 1024px) {
10    .container {
11        width: 970px;
12    }
13}

Points to Note About Nesting

Using too much nesting can make your code deeply layered and reduce maintainability. You should avoid deep nesting like the example below.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

This kind of code is too deeply nested, so it can be refactored as follows.

1.header .nav ul li a {
2    color: red;
3}

Practical Example: Navigation Bar

Below is an example of navigation bar styling using SASS nesting.

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4
 5    ul {
 6        display: flex;
 7        list-style: none;
 8        margin: 0;
 9        padding: 0;
10
11        li {
12            margin-right: 15px;
13
14            a {
15                color: #fff;
16                text-decoration: none;
17
18                &:hover {
19                    text-decoration: underline;
20                }
21            }
22        }
23    }
24}

• This code organizes and defines the styles for lists and links within the navigation bar, including hover effects, using SASS nesting.

Generated CSS

 1.navbar {
 2    background-color: #222;
 3    color: #fff;
 4}
 5.navbar ul {
 6    display: flex;
 7    list-style: none;
 8    margin: 0;
 9    padding: 0;
10}
11.navbar ul li {
12    margin-right: 15px;
13}
14.navbar ul li a {
15    color: #fff;
16    text-decoration: none;
17}
18.navbar ul li a:hover {
19    text-decoration: underline;
20}

Summary

The nesting feature in SASS is a powerful tool for concisely describing the hierarchical structure of CSS and improving readability. However, it is important to avoid excessive nesting and to organize your code properly.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video