====== LU13b - CSS Nesting ======

Seit 2023 unterstützen alle modernen Browser **natives CSS Nesting**. Sie können Regeln direkt ineinander verschachteln, was den Code lesbarer und wartbarer macht.


===== Das Problem ohne Nesting =====

Ohne Nesting muss jede Regel den vollständigen Selektor wiederholen:

<WRAP center round box 80%>
<code css>
.card { border-radius: 1rem; }
.card img { width: 100%; }
.card:hover { outline: 2px solid gold; }
.card p { opacity: 0; }
.card p.open { opacity: 1; }
</code>
</WRAP>

===== Die Lösung mit Nesting =====

Mit Nesting schreibt man alle zusammengehörenden Regeln in einen einzigen Block:

<WRAP center round box 80%>
<code css>
.card {
    border-radius: 1rem;

    img {
        width: 100%;             /* wird zu: .card img */
    }

    &:hover {
        outline: 2px solid gold; /* wird zu: .card:hover */
    }

    p {
        opacity: 0;              /* wird zu: .card p */

        &.open {
            opacity: 1;          /* wird zu: .card p.sichtbar */
        }
    }
}
</code>
</WRAP>


===== Das & (Ampersand) =====

Das ''&'' verweist immer auf den **übergeordneten Selektor**. Es ist zwingend, wenn die verschachtelte Regel direkt am Elternselektor angehängt werden soll – zum Beispiel bei Pseudo-Klassen oder zusätzlichen Klassen:

<WRAP center round box 80%>
^ Verschachtelung ^ Kompiliert zu ^ Wann nötig ^
| ''.card { img { } }'' | ''.card img'' | Kindelement (kein ''&'' nötig) |
| ''.card { &:hover { } }'' | ''.card:hover'' | Pseudo-Klasse am Elternelement |
| ''.card { &.aktiv { } }'' | ''.card.active'' | Zusätzliche Klasse am Elternelement |
| ''p { &.offen { } }'' | ''p.open'' | Zusätzliche Klasse am Elternelement |
</WRAP>

===== Praktisches Beispiel aus dem Projekt =====

Im Holiday-Explorer-Projekt wird Nesting verwendet, um die Beschreibung einer Kachel im geschlossenen und geöffneten Zustand zu stylen:

<WRAP center round box 80%>
<code css>
.text-wrapper {
    margin-top: auto;
    padding: 1.5rem;

    p {
        height: 0;
        opacity: 0;
        transition: all 300ms ease-in; /* wird zu: .text-wrapper p */

        &.open {
            height: auto;
            opacity: 1;              /* wird zu: .text-wrapper p.open */
        }
    }
}
</code>
</WRAP>