SCSS-Mixin: Pseudo States

Erstellt am: 17.03.2015 um 21:10 Uhr

Um mir in Sass alle möglichen Pseudo-States zu vereinfachen, habe ich ein kleines Mixin geschrieben.

Die Funktion erwartet eine Map mit Pseudo-State z.B. hover und Pseudo-Value z.B. #f00 sowie einen String mit der jeweiligen Property z.B. color oder background-color.

@mixin pseudo-states($map, $property: background-color) {
    @each $state, $value in $map {
        @if $state == default {
            #{$property}: #{$value};
        } @else {
            &:#{$state} {
                #{$property}: #{$value};
            }
        }
    }
}

Anwendungsbeispiel

Eingabe:

$link-properties: (
    default: none,
    hover: underline,
    focus: underline,
    active: none
);

.my-link {
    @include pseudo-states($link-properties, text-decoration);
}

Ausgabe:

.my-link {
  text-decoration: none;
}
.my-link:hover {
    text-decoration: underline;
}
.my-link:focus {
    text-decoration: underline;
}
.my-link:active {
    text-decoration: none;
}