Sass &

2 Minuten Lesezeit

Sass makes CSS fun again. (https://github.com/sass/sass)

Ich verwende Sass (Syntactically Awesome Style Sheets), das zu CSS kompiliert wird. Die simple und kurze Schreibweise von Sass (im Vergleich zu SCSS) ist der Grund, warum ich es SCSS vorziehe.

SCSS wird wie CSS notiert:

@mixin danger {
    color: red;
    font-weight: bold;
    padding: 1rem;
    border: 1px solid red;
}

Die gleiche Definition in Sass:

@mixin danger
    color: red
    font-weight: bold
    padding: 1rem
    border: 1px solid red

Das wird dann so verwendet:

p
    @include danger

Kompiliertes CSS:

p {
    color: red;
    font-weight: bold;
    border: 1px solid red;
}

In Sass wird auf geschweifte Klammern und Strichpunkte verzichtet. Dafür muss penibel auf korrekte und konsistente Einzüge und Abstände (immer ein Leerzeichen nach einem Doppelpunkt!) geachtet werden.

Das kaufmännische Und (Ampersand &)

Dieses Zeichen bietet in Sass (SCSS) weitreichende Möglichkeiten.

Es verbindet Code-Teile über mehrere Zeilen und ermöglicht dadurch, gleichlautende Definitionen effizient für mehrere Selektoren festzulegen.

Beispiel:

a
    color: green
    &:hover,
    &:focus,
    &:active
        color: blue
p
    margin-top: 0.5rem
    margin-bottom: 1rem
    &:first-child
        margin-top: unset
    &:last-child
        margin-bottom: 0.5rem

Wird in zu CSS:

p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

p:first-child {
    margin-top: unset;
}

p:last-child {
    margin-bottom: 0.5rem;
}

Der Clou: Wird das & nach dem untergeordneten Selektor platziert, wird das als umgekehrte Reihenfolge interpretiert:

button
    background: blue
    color: white
    p &
        background: yellow
        color: black

Wird zu:

button {
    background: green;
    color: white;
}

p button {
    background: yellow;
    color: black;   
}

Letzte Änderung am 29.09.2025