LESS Mixins

Mixins sind vordefinierbare CSS Eigenschaften, die per Aufruf in die Klasse geladen werden kann. Es gibt 2 Arten von Mixins, die mitausgegeben werden und die nur im LESS vorhanden sind. Des weiteren ist es möglich Mixins Variablen zu übergeben um diese im Mixin zu verwenden.

• ausgegebener Mixin
• versteckter Mixin
• Subelemente im Mixin
• Parameterübergabe
• !Important
• sinnvolles Beispiel für ein Mixin

ausgegebener Mixin

Compiliert den Mixin selbst mit.

.redtext {
    color: #dd0005;
    font-family: Georgia, serif;
    font-size: 20px;
}
.ueberschrift {
    .redtext;
}
.ueberschrift2 {
    .redtext();
}

generiert CSS:

.redtext {
  color: #dd0005;
  font-family: Georgia, serif;
  font-size: 20px;
}
.ueberschrift {
  color: #dd0005;
  font-family: Georgia, serif;
  font-size: 20px;
}
.ueberschrift2 {
  color: #dd0005;
  font-family: Georgia, serif;
  font-size: 20px;
}

versteckter Mixin

Der Mixin ist nur in den LESS Dateien sichtbar.

.redtext() {
    color: #dd0005;
    font-family: Georgia, serif;
    font-size: 20px;
}
.ueberschrift {
    .redtext;
}
.ueberschrift2 {
    .redtext();
}

generiert CSS:

.ueberschrift {
  color: #dd0005;
  font-family: Georgia, serif;
  font-size: 20px;
}
.ueberschrift2 {
  color: #dd0005;
  font-family: Georgia, serif;
  font-size: 20px;
}

Subelemente im Mixin

In Mixins können auch Subelemente definiert werden, des weiteren kann auch auf das Parent Element zugegriffen werden.

.redtextLink() {
    a {
      color: #dd0005;
      font-family: Georgia, serif;
      font-size: 20px;

      &:hover {
        color: #a60004;        
      }
    }
}
.ueberschrift {
    .redtextLink();
}

generiert CSS:

.ueberschrift a {
  color: #dd0005;
  font-family: Georgia, serif;
  font-size: 20px;
}
.ueberschrift a:hover {
  color: #a60004;
}

Parameterübergabe

An Mixins können Parameter übergeben werden und mit diesen dann im Mixin gearbeitet werden.

.Link(@color) {
    a {
      color: @color;
      font-family: Georgia, serif;
      font-size: 20px;

      &:hover {
        color: darken(@color, 10%);        
      }
    }
}
.ueberschrift {
    .Link(#a60004);
}

generiert CSS:

.ueberschrift a {
  color: #a60004;
  font-family: Georgia, serif;
  font-size: 20px;
}
.ueberschrift a:hover {
  color: #730003;
}

Default Wert

Bei Mixins mit Parametern können auch Defaultwerte mitgegeben werden, falls die Parameter leer sind.

.Link(@color:#a60004) {
    a {
      color: @color;
      font-family: Georgia, serif;
      font-size: 20px;

      &:hover {
        color: darken(@color, 10%);
      }
    }
}
.ueberschrift {
    .Link();
}
.ueberschrift2 {
    .Link(#08a600);
}

generiert CSS:

.ueberschrift a {
  color: #a60004;
  font-family: Georgia, serif;
  font-size: 20px;
}
.ueberschrift a:hover {
  color: #730003;
}
.ueberschrift2 a {
  color: #08a600;
  font-family: Georgia, serif;
  font-size: 20px;
}
.ueberschrift2 a:hover {
  color: #067300;
}

!Important

Mit dem !important zusatz können alle Werte die vom Mixin übergeben werden auf !important gesetzt werden.

.Link(@color:#a60004) {
    color: @color;
    font-family: Georgia, serif;
    font-size: 20px;
}
.ueberschrift {
    .Link() !important;
}

generiert CSS:

.ueberschrift {
  color: #a60004 !important;
  font-family: Georgia, serif !important;
  font-size: 20px !important;
}

sinnvolles Beispiel für ein Mixin

Bei diesem Beispiel werden für alle Browser der Borderradius gesetzt.

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
div {
  .border-radius(5px);
}

generiert CSS:

div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Zur Tutorialübersicht: LESS Tutorial
Zum Vorigen Teil: LESS Variablen