Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── & at the end — inverting the nesting direction ───────────────────────────

.button {
    background: #3498db;
    color     : #fff;
    padding   : 0.6rem 1.2rem;

// Generates: .theme-dark .button
    .theme-dark & {
        background: #1a252f;
        border    : 1px solid #5dade2;
    }

// Generates: .sidebar .button
    .sidebar & {
        display: block;
        width  : 100%;
    }
}

// ── String interpolation with & ───────────────────────────────────────────────

$sizes: sm, md, lg;

@each $size in $sizes {
    .btn-#{$size} {
        // & refers to .btn-sm, .btn-md, .btn-lg in turn
        &:hover { opacity: 0.85; }
        &:active { transform: translateY(1px); }
    }
}

// ── @at-root ─────────────────────────────────────────────────────────────────

.component {
    $anim-name: component-fade;  // local variable, useful for context

color: #333;

// @at-root moves this rule to the stylesheet root — no .component prefix
    @at-root {
        @keyframes #{$anim-name} {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
    }

&.is-visible {
        animation: $anim-name 0.3s ease-out;
    }
}