20/09/2016 Angela Frontend

LESS – eine Ode an die Freude

In der Welt des Webdesigns und der Web-Entwicklung stehen regelmäßig neue Techniken für verbesserte Workflows zur Verfügung. Daher sollten Entwickler, sei es Frontend- oder Backend-Entwickler, regelmäßig ihren Arbeitsworkflow überdenken und hinterfragen. Dazu gehört auch das Testen neuer Techniken und das sinnvolle Integrieren dieser.

Bereits vor einigen Jahren erreichte LESS die Welt der Frontend-Entwicklung. LESS ist im Prinzip „nur“ eine Kurzschreibweise der Formatierungssprache CSS (Cascading Style Sheets). Aber noch heute erfreuen wir Web-Entwickler uns täglich an dieser Kurzschreibweise. Mit LESS lässt sich ein Webdesign schneller und übersichtlicher als Webseiten-Template umsetzen.

Ganz nach dem Prinzip „LESS is more“

Mittels HTML wird in der Web-Entwicklung das Grundgerüst einer Webseite definiert – ähnlich dem Rohbau eines Hauses. Durch die Formatierungssprache CSS wird diesem Rohbau ein Aussehen verliehen. Mit CSS werden die Farben, Größen und Schriftarten definiert, welche durch das Webdesign vorgegeben sind. Folgend ein kleines CSS-Beispiel:

.highlighted-box {
 background: #da051e;
}

.highlighted-box.color-highlight-alt {
 background: #045782;
 color: #ffffff;
}

.highlighted-box.color-highlight-alt .headline {
 background-color: #034669;
}

.highlighted-box .headline {
 background-color: #c1041b;
}

LESS erlaubt uns weiterhin alle CSS-Eigenschaften zu nutzen. Es erweitert diese aber noch um einige Ergänzungen. Zum Beispiel können die CSS-Anweisungen verschachtelt werden, was den Code deutlich übersichtlicher macht. Folgend der LESS-Code des obigen CSS-Beispiels:

.highlighted-box {
  background: @color-highlight;

  &.color-highlight-alt {
    background: @color-highlight-alt;
    color: @color-font-on-highlighted-alt-bg;

    .headline {
      background-color: darken(@color-highlight-alt,5%);
    }
  }

  .headline {
    background-color: darken(@color-highlight,5%);
  }
}

Variablen

Ebenfalls bringt LESS die Möglichkeit mit, Variablen zu verwenden. Somit ist es möglich zum Beispiel die Farben aus dem Webdesign in Variablen abzuspeichern. Diese können dann über den Variablen-Namen beliebig eingesetzt werden, was den Entwicklern ein kleines HEX-Wert-Chaos erspart. Mittels der Variablen ist aber noch viel mehr zu steuern als Farbwerte, da alle CSS-Eigenschaften als Variable abgespeichert werden können. Somit bieten LESS-Variablen viele Möglichkeiten, den Code aufzuräumen und zu vereinheitlichen.

@color-highlight: #679f37;

.highlighted-box {
 background: @color-highlight;
}

a {
 color: @color-highlight;
}

Mixins

Ebenfalls ist die Nutzung sogenannter Mixins möglich. Dies sind kleine Funktionen, die flexibel definiert werden können. Neben den Variablen ersparen auch Mixins viel Schreibarbeit für wiederkehrende Aufgaben. Ebenfalls liefert LESS bereits fertige Funktionen, die zum Beispiel zum Abwandeln von Farbwerten genutzt werden können. Ebenfalls sind auch for-Schleifen möglich, welche wiederkehrende Aufgaben leicht vereinfachen können. Ein Beispiel eines Mixins:

.prefix(@property, @value) {
  -moz-@{property}: @value;
  -webkit-@{property}: @value;
  @{property}: @value;
}

.download-box {
  .prefix(transition, all .3 ease);
}

Nachfolgend das Ergebnis des Mixins in CSS:

.download-box {
  -moz-transition: all 0.3 ease;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
}

LESS in der Praxis – noch schneller vom Webdesign zum Website-Template

In der Praxis bewährt sich LESS durch die Übersichtlichkeit und das schnelle Umsetzen wiederkehrender Aufgaben und Eigenschaften. Damit werden auch nachträgliche Änderungen in einem Webseiten-Template schneller und einfacher umsetzbar. Abgesehen davon, dass die Erstellung eines LESS-Templates in Vergleich zu reinem CSS-Code einiges an Zeit einspart, macht das Entwickeln auch mehr Spaß. Da weniger Arbeit in sich wiederholende Schreibarbeit gesteckt werden muss, bleibt mehr Zeit für Ideen und das Ausprobieren neuer Techniken oder Animationen.

Zudem eröffnet LESS neue Möglichkeiten in der Template-Entwicklung. So können durch die Auslagerung der Variablen in eigene Dateien und die geschickte Nutzung der CSS-Regel @import unterschiedliche Farbvarianten eines CSS-Templates eingesetzt werden. Das macht zum Beispiel die Bereitstellung eines Webseiten-Templates als Farb- und als Schwarz/Weiß-Version einfach umsetzbar und leicht pflegbar – ohne doppelten Quellcode zu erzeugen.

LESS ist aus dem Alltag des Web-Entwicklers schon gar nicht mehr wegzudenken. Damit haben wir Anlass genug, dieser Technik ein großes „Dankeschön“ auszusprechen!

Sie interessieren sich für ein qualitativ hochwertiges Webseiten-Template „made in Germany“? Sprechen Sie uns an – wir bieten hochwertiges Webdesign aus Leipzig.