Boolie.org

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;
}

View Comments

Aktuell keine Kommentare vorhanden.

nächster Beitrag