Nested Properties and Combinator Selectors

Beyond rule nesting, SASS supports nested property syntax for CSS properties that share a namespace prefix. For example, `font-family`, `font-size`, and `font-weight` all share the `font-` prefix. You can nest them under `font:` to avoid repeating the prefix, resulting in cleaner and more maintainable code. CSS combinators — descendant (space), child (`>`), adjacent sibling (`+`), and general sibling (`~`) — can all be used inside SASS nesting. Placing a combinator directly before a nested selector includes it between the parent and the child in the compiled output. This is fully equivalent to writing the full selector longhand. One caution with deep nesting is specificity creep. Nesting five or six levels deep generates very long selectors with high specificity, making them difficult to override. A widely recommended rule of thumb is to limit nesting to three levels maximum. If you find yourself nesting deeper, it is usually a sign that the component should be split into smaller, independently styled pieces.

Example

// ── Nested property namespaces ────────────────────────────────────────────────

.article {
    // font: is the namespace; SASS expands each inner property
    font: {
        family : 'Georgia', serif;
        size   : 1.125rem;
        weight : 400;
        style  : normal;
        line-height: 1.8;
    }

    // margin: namespace
    margin: {
        top    : 2rem;
        bottom : 2rem;
        left   : auto;
        right  : auto;
    }

    max-width: 70ch;
}

// ── Combinator selectors inside nesting ───────────────────────────────────────

.form-group {
    margin-bottom: 1.25rem;

    // Direct child combinator: .form-group > label
    > label {
        display      : block;
        margin-bottom: 0.4rem;
        font-weight  : 600;
    }

    // Descendant: .form-group input
    input,
    textarea,
    select {
        width     : 100%;
        padding   : 0.5rem 0.75rem;
        border    : 1px solid #ccc;
        border-radius: 4px;

        &:focus { border-color: #3498db; outline: none; }
        &:invalid { border-color: #e74c3c; }
    }

    // Adjacent sibling: .form-group + .form-group
    & + & { margin-top: 0.5rem; }
}

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