SASS Nesting

SASS allows you to nest CSS selectors in a way that follows the same visual hierarchy of your HTML. This makes your stylesheets more readable and reduces repetition.

Use the & symbol to reference the parent selector. Avoid nesting more than 3 levels deep to keep specificity manageable.

Example

// SCSS nesting
nav {
  background: #1e293b;
  padding: 1rem;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
  }

  li {
    display: inline-block;
  }

  a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: background 0.2s;

    &:hover {
      background: rgba(255,255,255,0.1);
    }

    &.active {
      background: #6366f1;
      font-weight: 600;
    }
  }
}

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned