Seite 3: Mixins und extend

Inhaltsverzeichnis

Mixins

Mit Mixins sollen sich Eigenschaften eines Regelsets in ein anderes einbeziehen lassen. Sie ermöglichen so die Wiederverwendung von Eigenschaften innerhalb unterschiedlicher Stylesheets. Durch die einmalige Mixin-Definition gehört vor allem bei Änderungen das lästige Durchsuchen des Codes der Vergangenheit an.

In Sass können Entwickler die @mixin-Direktive verwenden, in LESS werden sie über einen Klassenselektor definiert. Stylus hingegen verzichtet ganz auf einen Präfix:

LESS

.crop(@width: 100px) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: @width;
}

.title {
    .crop();
}

.text {
    .crop(200px);
}

Sass

@mixin crop($width: 100px) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: $width;
}

.title {
    @include crop();
}

.text {
    @include crop(200px);
}

Stylus

crop(width= 100px) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: width;
}

.title {
    crop();
}

.text {
    crop(200px);
}

Aufgeräumter Code dank extend

Um Styles an mehrere Selektoren gleichzeitig zu setzen, kommt im Standard-CSS folgender Code zum Einsatz:

p, ul, ol {
    /* … */
} 

Auch wenn der Ansatz wunderbar funktioniert, kann das wiederholte Verwenden der Klassen die Wartbarkeit des Codes erschweren. Die CSS-Präprozessoren kontern mit Inheritance, was im Grunde nichts anderes heißt, als Eigenschaften eines Selektors einem anderen zu vererben. Sass und Stylus machen es vor:

.nav {
    padding: 5px;
}
.side-nav {
    @extend .nav;
} 

Die kompilierte Ausgabe:

.nav,
.side-nav {
    padding: 5px;
}

LESS enthält erst seit einer neueren Version (>1.4) eine extend-Funktion und weicht bei ihrer Implementierung etwas ab: Statt der at-rule (@extend) wie bei Sass und Stylus, implementiert LESS eine Syntax für Pseudo-Klassen, die sich am Selektor oder in ihm verwenden lässt:

.nav {
    padding: 5px;
}
.side-nav:extend(.nav);

// Alternativ:
.sidebar-nav {
    &:extend(.nav);
}

Die kompilierte Ausgabe:

.nav,
.side-nav {
  padding: 5px;
}

Mehrere Klassen lassen sich mit einem Komma getrennt übergeben. Ein zusätzlicher Parameter all sorgt dafür, dass auch die verschachtelten Klassen "extended" werden:

.main-nav {
    &:extend(.nav all, .side-nav);
}