Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Basic nesting ─────────────────────────────────────────────────────────────

nav {
    background: #2c3e50;
    padding   : 0 1rem;

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

li { margin-right: 0.5rem; }

a {
        color          : #ecf0f1;
        text-decoration: none;
        padding        : 0.75rem 1rem;
        display        : block;

// & is replaced by "nav a" during compilation
        &:hover  { color: #3498db; }
        &:focus  { outline: 2px solid #3498db; }
        &.active { font-weight: 700; border-bottom: 2px solid #3498db; }
    }
}

// ── BEM with the parent selector ─────────────────────────────────────────────
.card {
    border-radius: 8px;
    padding      : 1.5rem;
    background   : #fff;
    box-shadow   : 0 2px 8px rgba(0,0,0,.1);

// &__element → .card__element
    &__header { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
    &__body   { font-size: 1rem; line-height: 1.6; }
    &__footer { margin-top: 1.5rem; border-top: 1px solid #eee; padding-top: 1rem; }

// &--modifier → .card--modifier
    &--featured { border: 2px solid #3498db; }
    &--dark     { background: #2c3e50; color: #ecf0f1; }
}