SCSS - Mixins

1. Pseudofunktion

Bei Mixins handelt es sich um eine Art von "Funktion", in der man Anweisungen bündeln kann. Definiert wird es über @mixin().

2. Das Problem

Oft benötigt man dieselben Anweisungen immer und immer wieder. Nehmen wir nur das berühmte Clearfix. Anstatt das nun jedes mal auszuschreiben, bündelt man die notwendigen Anweisungen in einem Mixin.

@mixin clearfix() {
  content: ".";   
  display: block;               
  clear: both;
  visibility: hidden;  
  height: 0;
}

Der Aufruf im entsprechenden Selektor erfolgt dann über @include.

div.bla:after {
    @include clearfix();
}
div.blubb:after{
    @include clearfix();
}
/* wird zu */
div.bla:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}
div.blubb:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}

In beiden Fällen werden nun die Anweisungen aus dem Mixin in die Selektoren geschrieben.

3. Parameter

Mixins eignen sich auch hervorragend für diese verfluchten Vendor-Präfixe. Da man ja nie weiß, welcher Browser in welcher Version nun was originär unterstützt, sollte man auf Nummer sicher gehen. Aber was ist, wenn man dynamische Werte benötigt? Also zum Beispiel bei border-radius? Kein Problem, bei Mixins kann man auch Parameter mit übergeben.

@mixin borderRadius($radius) {
     -ms-border-radius: $radius;
      -o-border-radius: $radius;
    -moz-border-radius: $radius;
 -webkit-border-radius: $radius;  
         border-radius: $radius;
}
div.blubb{
    @include borderRadius(2px);
}

Ach ja, man kann auch mehrere Parameter setzen, zum Beispiel für ein (hier zumindest halbswegs) komplettes border-Mixin.

@mixin border($radius, $width, $style, $color) {
     -ms-border-radius: $radius;
      -o-border-radius: $radius;
    -moz-border-radius: $radius;
 -webkit-border-radius: $radius;  
         border-radius: $radius;
         border: $width $style $color;
}
div.blubb{
    @include border(5px, 2px, solid, #f00);
}
/* wird zu */
div.blubb {
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #f00;
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt