Kontexte und Ereignisse vereinfachen

Sass kann in gewisser Weise eine kleine Blackbox sein, besonders für junge Entwickler: Man gibt etwas hinein, man bekommt etwas heraus. Nehmen wir zum Beispiel die Selektor-Referenz (&), sie ist ein wenig beängstigend.

Das gesagt, muss es nicht so sein. Wir können seine Syntax mit nichts weiter als zwei sehr einfachen Mixins freundlicher gestalten.

Ereignisse

Beim Schreiben von Sass findet man sich oft dabei wieder, Dinge wie diese zu schreiben

.my-element {
    color: red;

    &:hover,
    &:active, 
    &:focus {
        color: blue;
    }
}

Ziemlich mühsam und nicht unbedingt leicht zu lesen. Wir könnten einen kleinen Mixin erstellen, um es einfacher zu machen.

/// Event wrapper
/// @author Harry Roberts
/// @param {Bool} $self (false) - Whether or not to include current selector
/// @see https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
@mixin on-event($self: false) {
    @if $self {
        &,
        &:hover,
        &:active,
        &:focus {
            @content;
        }
    } @else {
        &:hover,
        &:active,
        &:focus {
            @content;
        }
    }
}

Umschreiben unseres vorherigen Beispiels

.my-element {
    color: red;

    @include on-event {
        color: blue;
    }
}

Viel besser, nicht wahr?

Wenn wir jetzt den Selektor selbst einbinden wollen, können wir den Parameter $self auf true setzen. Zum Beispiel

.my-element {
    @include on-event($self: true) {
        color: blue;
    }
}

Dieser SCSS-Snippet wird ergeben

.my-element,
.my-element:hover,
.my-element:active,
.my-element:focus {
    color: blue
}

Kontexte

In ähnlicher Weise ist es nicht ungewöhnlich, ein Element abhängig von seinem übergeordneten Element zu stylen. Zum Beispiel, etwas wie das

.my-element {
    display: flex;

    .no-flexbox & {
        display: table;
    }
}

Machen wir die Syntax wieder ein wenig freundlicher mit einem einfachen Mixin

/// Contexts
/// @author Kitty Giraudel
/// @param {String | List} $context
@mixin when-inside($context) {
    #{$context} & {
        @content;
    }
}

Umschreiben unseres vorherigen Beispiels

.my-element {
    display: flex;

    @include when-inside('.no-flexbox') {
        display: table;
    }
}