Sass Nested Rules and Properties

Welcome to The Coding College! In this tutorial, we’ll explore one of Sass’s most powerful features: nested rules and properties. With nesting, you can write CSS that mirrors the structure of your HTML, making your stylesheets more intuitive and easier to manage.

What Are Nested Rules?

In standard CSS, selectors are flat, requiring you to repeatedly write the parent selectors for child elements. Sass eliminates this redundancy by allowing you to nest child selectors within parent selectors.

Example Without Nesting (Standard CSS):

nav ul {  
  margin: 0;  
  padding: 0;  
  list-style: none;  
}  

nav li {  
  display: inline-block;  
}  

nav a {  
  text-decoration: none;  
}  

Example With Nesting (Sass):

nav {  
  ul {  
    margin: 0;  
    padding: 0;  
    list-style: none;  
  }  

  li {  
    display: inline-block;  
  }  

  a {  
    text-decoration: none;  
  }  
}  

With nesting, the relationship between elements is clearer, and your code is more concise.

Nesting Rules in Sass

Basic Nesting

Nest child elements inside parent selectors to define the hierarchy:

header {  
  h1 {  
    font-size: 2rem;  
  }  

  p {  
    color: gray;  
  }  
}  

Nesting Pseudo-Classes and Pseudo-Elements

You can also nest pseudo-classes like :hover and pseudo-elements like ::before:

.card {  
  padding: 20px;  

  @media (max-width: 600px) {  
    padding: 10px;  
  }  
}  

The & symbol refers to the current selector, making it easy to append pseudo-classes or other modifiers.

Nesting with Media Queries

Sass allows you to nest media queries within your selectors:

.card {  
  font-family: 'Arial';  
  font-size: 16px;  
  font-weight: bold;  
}  

Nesting Properties

In addition to nesting rules, Sass supports property nesting for shorthand properties like font, background, or border.

Example Without Property Nesting:

.card {  
  font-family: 'Arial';  
  font-size: 16px;  
  font-weight: bold;  
}  

Example With Property Nesting:

.card {  
  font: {  
    family: 'Arial';  
    size: 16px;  
    weight: bold;  
  };  
}  

This makes your CSS more structured and easier to read.

Best Practices for Nested Rules

1. Avoid Deep Nesting: While nesting is useful, over-nesting can make your code difficult to maintain. Limit nesting to 2–3 levels.
2. Use & Wisely: The & symbol helps with pseudo-classes and modifiers but should be used judiciously to keep your code readable.
3. Combine Nesting with Modular CSS: Break your styles into smaller, reusable components to reduce clutter.

Example: Nested Rules in Action

Here’s a complete example using nested rules and properties:

.navbar {  
  background-color: #333;  

  ul {  
    margin: 0;  
    padding: 0;  
    list-style: none;  

    li {  
      display: inline-block;  

      a {  
        color: white;  
        text-decoration: none;  

        &:hover {  
          color: #f4f4f4;  
        }  
      }  
    }  
  }  

  @media (max-width: 768px) {  
    ul {  
      display: block;  

      li {  
        display: block;  
      }  
    }  
  }  
}  

This example demonstrates nesting selectors, pseudo-classes, and media queries, creating a clean and structured stylesheet.

Benefits of Nesting in Sass

1. Improved Readability: Code structure reflects HTML hierarchy.
2. Reduced Repetition: Eliminate redundant parent selectors.
3. Cleaner Syntax: Combine rules and properties into logical blocks.
4. Easier Maintenance: Update styles in one place instead of multiple locations.

Conclusion

Nesting rules and properties in Sass makes CSS development more efficient and organized. By aligning your styles with the structure of your HTML, you can reduce redundancy and improve readability.