LESS Mixins

Datum
28.11.2017

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

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

Marc Borkowski Portait
Autor: Marc Borkowski

Moin,
mein Name ist Marc Borkowski. Ich bin in Berlin geboren und habe mich in eine ruhigere Stadt verkrümelt, Wismar. Ich habe mehrere Jahre Erfahrung im Bereich Frontend und bin ausgebildeter Mediengestalter. Aktuell entwickle ich mich zu einem Techlead und werde hier meine Erfahrungen mit euch teilen.

Kontakt

E-Mail: moin@boolie.org | Über mich Seite

Instagram logoLinkedIn LogoYouTube Logo

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Kommentare (0)
klimabewusste Website