In der Welt des\u00a0Webdesigns und der Web-Entwicklung\u00a0stehen regelm\u00e4\u00dfig neue Techniken f\u00fcr verbesserte Workflows zur Verf\u00fcgung. Daher sollten\u00a0Entwickler, sei es Frontend- oder Backend-Entwickler, regelm\u00e4\u00dfig ihren Arbeitsworkflow \u00fcberdenken\u00a0und\u00a0hinterfragen. Dazu geh\u00f6rt auch das Testen neuer Techniken und das sinnvolle Integrieren dieser.<\/p>\n
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\u00e4glich an dieser Kurzschreibweise. Mit LESS l\u00e4sst sich ein Webdesign schneller und \u00fcbersichtlicher als Webseiten-Template umsetzen.<\/p>\n
Mittels HTML wird in der Web-Entwicklung das Grundger\u00fcst einer Webseite definiert – \u00e4hnlich dem\u00a0Rohbau eines Hauses. Durch die\u00a0Formatierungssprache CSS wird diesem Rohbau ein Aussehen verliehen. Mit CSS\u00a0werden die Farben, Gr\u00f6\u00dfen\u00a0und\u00a0Schriftarten definiert, welche durch das Webdesign vorgegeben sind. Folgend ein kleines CSS-Beispiel:<\/p>\n
.highlighted-box {\r\n background: #da051e;\r\n}\r\n\r\n.highlighted-box.color-highlight-alt {\r\n background: #045782;\r\n color: #ffffff;\r\n}\r\n\r\n.highlighted-box.color-highlight-alt .headline {\r\n background-color: #034669;\r\n}\r\n\r\n.highlighted-box .headline {\r\n background-color: #c1041b;\r\n}<\/pre>\nLESS erlaubt uns weiterhin alle CSS-Eigenschaften zu nutzen. Es erweitert diese aber noch um einige Erg\u00e4nzungen. Zum Beispiel k\u00f6nnen die CSS-Anweisungen verschachtelt<\/strong> werden, was den Code deutlich\u00a0\u00fcbersichtlicher\u00a0macht. Folgend der LESS-Code des obigen CSS-Beispiels:<\/p>\n.highlighted-box {\r\n background: @color-highlight;\r\n\r\n &.color-highlight-alt {\r\n background: @color-highlight-alt;\r\n color: @color-font-on-highlighted-alt-bg;\r\n\r\n .headline {\r\n background-color: darken(@color-highlight-alt,5%);\r\n }\r\n }\r\n\r\n .headline {\r\n background-color: darken(@color-highlight,5%);\r\n }\r\n}<\/pre>\nVariablen<\/h3>\n
Ebenfalls bringt LESS die M\u00f6glichkeit mit, Variablen<\/strong> zu verwenden. Somit ist es m\u00f6glich zum Beispiel die Farben aus dem Webdesign in Variablen abzuspeichern. Diese k\u00f6nnen dann \u00fcber 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\u00a0alle CSS-Eigenschaften als Variable abgespeichert werden k\u00f6nnen. Somit bieten LESS-Variablen viele M\u00f6glichkeiten, den Code aufzur\u00e4umen und zu vereinheitlichen.<\/p>\n@color-highlight: #679f37;\r\n\r\n.highlighted-box {\r\n background: @color-highlight;\r\n}\r\n\r\na {\r\n color: @color-highlight;\r\n}<\/pre>\nMixins<\/h3>\n
Ebenfalls ist die Nutzung\u00a0sogenannter Mixins m\u00f6glich. Dies sind\u00a0kleine Funktionen<\/strong>, die flexibel\u00a0definiert werden k\u00f6nnen. Neben den Variablen\u00a0ersparen auch Mixins\u00a0viel Schreibarbeit f\u00fcr wiederkehrende Aufgaben. Ebenfalls liefert\u00a0LESS bereits\u00a0fertige Funktionen, die zum Beispiel zum Abwandeln von Farbwerten genutzt werden k\u00f6nnen. Ebenfalls sind auch for-Schleifen m\u00f6glich, welche wiederkehrende Aufgaben leicht vereinfachen k\u00f6nnen. Ein Beispiel eines Mixins:<\/p>\n.prefix(@property, @value) {\r\n -moz-@{property}: @value;\r\n -webkit-@{property}: @value;\r\n @{property}: @value;\r\n}\r\n\r\n.download-box {\r\n .prefix(transition, all .3 ease);\r\n}<\/pre>\nNachfolgend das Ergebnis des Mixins in CSS:<\/p>\n
.download-box {\r\n -moz-transition: all 0.3 ease;\r\n -webkit-transition: all 0.3 ease;\r\n transition: all 0.3 ease;\r\n}<\/pre>\nLESS in der Praxis\u00a0– noch schneller vom Webdesign zum Website-Template<\/h2>\n
In der Praxis bew\u00e4hrt sich LESS durch die \u00dcbersichtlichkeit und das schnelle Umsetzen wiederkehrender Aufgaben und Eigenschaften. Damit werden auch nachtr\u00e4gliche \u00c4nderungen 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\u00a0mehr Spa\u00df. Da weniger Arbeit\u00a0in sich wiederholende Schreibarbeit gesteckt werden muss, bleibt mehr Zeit f\u00fcr Ideen und das Ausprobieren neuer Techniken oder Animationen.<\/p>\n
Zudem er\u00f6ffnet LESS neue M\u00f6glichkeiten in der Template-Entwicklung. So k\u00f6nnen durch die Auslagerung der Variablen in eigene Dateien und die geschickte Nutzung der CSS-Regel @import unterschiedliche Farbvarianten eines\u00a0CSS-Templates eingesetzt\u00a0werden. Das macht zum Beispiel die Bereitstellung eines Webseiten-Templates als Farb- und als Schwarz\/Wei\u00df-Version einfach umsetzbar und leicht pflegbar – ohne doppelten Quellcode zu erzeugen.<\/p>\n