SCSS Nesting

SCSS Nesting is a feature in Sass (Syntactically Awesome Style Sheets), which is a CSS preprocessor that extends CSS with features like variables, mixins, inheritance, and most notably nesting. Nesting allows you to write your CSS in a hierarchical structure, mirroring the HTML structure, which helps make styles more readable and maintainable.

Basic Nesting in SCSS

With SCSS, you can nest selectors inside one another to indicate the parent-child relationship between HTML elements. This mimics the structure of the HTML, making your stylesheet more organized.

Example:

scss

// SCSS file
nav {
  background-color: #333;
  color: white;
  
  ul {
    list-style: none;
    padding: 0;
    
    li {
      display: inline-block;
      padding: 10px;
      
      a {
        color: white;
        text-decoration: none;
        
        &:hover {
          color: yellow;
        }
      }
    }
  }
}

In this example:

The nav block styles the navigation bar.
The ul block styles the unordered list within the navigation.
The li block styles the list items inside the ul.
The a block styles the links inside each li.

This nesting reflects the structure of the HTML, which might look like this:

html

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Nesting & Selector Specificity

When nesting, SCSS compiles the nested code into standard CSS with proper selectors, maintaining specificity.

For example:

scss

nav {
  ul {
    li {
      a {
        color: red;
      }
    }
  }
}

The resulting CSS will be:

css

nav ul li a {
  color: red;
}

Nesting with Pseudo-Classes & Pseudo-Elements

SCSS allows nesting of pseudo-classes and pseudo-elements as well, just like regular selectors.

Example:

scss

button {
  background-color: blue;
  color: white;
  
  &:hover {
    background-color: darkblue;
  }
  
  &::before {
    content: '🔹';
    margin-right: 5px;
  }
}

In this example:

&:hover refers to the hover state of the button.
&::before adds content before the button text (a little blue diamond).

Avoiding Excessive Nesting

Although SCSS allows deep nesting, excessive nesting can make your code harder to maintain and lead to overly specific selectors, which can conflict with other styles.

Too much nesting:

scss

section {
  .container {
    .row {
      .column {
        .content {
          p {
            color: #333;
          }
        }
      }
    }
  }
}

This deep nesting is difficult to manage and can lead to issues with specificity. A better approach would be to keep it shallow and use classes that are more modular.

Recommended approach:

scss

section {
  .container {
    .row {
      .column {
        .content {
          p {
            color: #333;
          }
        }
      }
    }
  }
}

Instead of heavily nesting within each section, consider separating the concerns and using BEM (Block Element Modifier) conventions to keep things more organized.

SCSS Nesting with `&` (Parent Selector)

The & symbol in SCSS is used to reference the parent selector within a nested rule. This can be useful for various cases, such as applying states (like hover or focus) or modifying the class name dynamically.

Example of `&` in Nesting:

scss

.button {
  background-color: blue;
  color: white;
  
  &:hover {
    background-color: darkblue;
  }
  
  &.active {
    background-color: green;
  }
}

This SCSS code compiles to the following CSS:

css

.button {
  background-color: blue;
  color: white;
}
.button:hover {
  background-color: darkblue;
}
.button.active {
  background-color: green;
}

The & makes it easy to refer to the parent class (.button) when adding different states.

Nesting and Media Queries

You can also nest media queries inside SCSS. This allows you to write responsive styles in a structured manner.

Example:

scss

.container {
  width: 100%;
  
  @media (max-width: 768px) {
    width: 90%;
  }
  
  @media (max-width: 480px) {
    width: 80%;
  }
}

This will compile to:

css

.container {
  width: 100%;
}
@media (max-width: 768px) {
  .container {
    width: 90%;
  }
}
@media (max-width: 480px) {
  .container {
    width: 80%;
  }
}

Nesting with `@import` and `@use`

While nesting applies to CSS rules, it can also be used in conjunction with SCSS’s @import or @use rules. For example, you can organize your styles into separate files and then nest the @use statements for those files.

Example:

scss

// _buttons.scss
.button {
  padding: 10px;
  background-color: blue;
  
  &:hover {
    background-color: darkblue;
  }
}

// main.scss
@use 'buttons';

.container {
  width: 100%;
}

Benefits of Nesting

Organized Code: Nesting mirrors the structure of your HTML, making it easy to understand the relationship between elements.
Increased Readability: Nesting can reduce repetition and keep your styles more concise, improving readability.
Modularity: You can define styles specific to components or elements inside containers, which can help with modular design.
Avoiding Global Styles: You avoid polluting the global namespace by scoping styles to specific parent-child relationships.

Drawbacks of Nesting

Over-Nesting: Too much nesting can lead to highly specific selectors, which can make debugging and maintaining the code harder.
Performance Issues: Deeply nested selectors can slow down page rendering, as CSS selectors are evaluated from top to bottom.

Conclusion

SCSS nesting allows you to write more organized, structured, and readable stylesheets. However, it’s important to strike the right balance—over-nesting can lead to poor maintainability and specificity issues. By following best practices like shallow nesting, using the parent selector &, and keeping styles modular, you can harness the power of SCSS while keeping your code clean and maintainable.