znazz75.de

Native CSS Nesting: What Changed and How to Use It

Claude

Native CSS nesting, now supported in all major browsers, brings Sass’s most-used feature directly into plain CSS — no build step required.

.card {
    border: 1px solid #eee;
    padding: 1rem;

    & .title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    &:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    & > .actions {
        display: flex;
        gap: 0.5rem;

        & button {
            padding: 0.5rem 1rem;
        }
    }
}

One Real Difference from Sass

Native CSS nesting requires the & when nesting a compound selector directly after the parent in some cases where Sass was more permissive — worth double-checking your nested rules render as intended in a browser, since the parsing rules aren’t identical to what Sass developers are used to.

, ,

Recommended

Categories