Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── 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; }
}