Bryan Albrecht

Less verwenden

In diesem Tutorial erkläre ich, wie man Less verwendet, ohne JavaScript zu benutzen.

Für dieses Tutorial habe ich mit Visual Studio 2013 gearbeitet. Da VS2013 nicht von Anfang an einen Compiler für Less integriert hat, musste ich mir die Erweiterung Web Essentials 2015 herunterladen. Diese Erweiterung hat viele Tools integriert, welche die Entwicklung im Web vereinfachen.

Less

Wie bereits in einem anderen Tutorial erklärt, ist Less eine Erweiterung für CSS. In diesem Tutorial werde ich auf die einzelnen Funktionen von Less eingehen.

Variablen

Um das mehrfach verwenden von gleichen Werten zu vereinfachen, bringt Less Variablen mit sich. Ein gutes Beispiel fürs Verwenden von Variablen sind die Farben. Dies habe ich als Beispiel gewählt, da es gut sein kann, dass im Laufe einer Webentwicklung mehrmals die Farben geändert werden. Um nicht denselben Wert X mal anpassen zu müssen, kann man diesen als Variable festlegen. Wenn nun die Farbe ändert, muss der Wert nur einmal angepasst werden.

Im folgenden Beispiel werden in drei verschiedenen Elementen die gleichen Farben verwendet:

  1. // Color variables
  2. @color1: #003030; // Main Color
  3. @color2: #2031fe; // Secont Color
  4. @color3: #ff2030; // Third color
  5. .class1 {
  6. background-color: @color3;
  7. border-color: @color2;
  8. color: @color1;
  9. }
  10. .class2 {
  11. background-color: @color1;
  12. border-color: @color3;
  13. color: @color2;
  14. }
  15. .class3 {
  16. background-color: @color2;
  17. border-color: @color1;
  18. color: @color3;
  19. }

Diese Methode vereinfacht das ändern der Farben extrem und es wird Zeit eingespart.

Funktionen

Less bringt eine grosse Menge an Funktionen mit sich. Diese Funktionen können wie folgt angewendet werden:

  1. @ variables: Function(PARAMETER);

Wie in anderen Programmiersprachen, kann eine Funktion keinen unterschiedlich viele Parameter haben.

Sehr nützlich sind die Funktionen von Less, wenn man zum Beispiel einen Hover Effekt erstellen möchte. Um beim hovern einen dunkleren Hintergrund zu bekommen, kann man ganz einfach eine Funktion zum Abdunkeln der original Farbe benutzen.

Im folgenden Beispiel wird einem Element eine Farbe gegeben, welche sich um 25% verdunkelt, wenn die Maus darüber ist:

  1. // Color variables
  2. @color1: #003030; // Main Color
  3. .class1 {
  4. background-color:@color1;
  5. // hover for class1
  6. &:hover{
  7. background-color: darken(@color1, 25%);
  8. }
  9. }

Operationen

Mit Less werden auch mathematische Operationen eingebaut. Was langweilig klingt, ist in Wirklichkeit extrem nützlich.

Ein gutes Beispiel für die Verwendung ist die Breite eines Elements. Das heisst, dass man einmal festlegen muss, in welchen Dimensionen sich die verschiedenen Elemente verhalten. Nach diesem einmaligen Festlegen, muss man nur noch bei einem Element die Grösse verändern, was zur Folge hat, dass sich alle anderen auch verändern.

Im folgenden Beispiel hat es drei Elemente, welche jeweils doppelt so gross sind, wie das darüber liegende:

  1. @firstWidth: 200px;
  2. @secondWidth: @firstWidth * 2;
  3. @secondWidth: @secondWidth * 2;
  4. .class1 {
  5. width: @firstWidth;
  6. }
  7. .class2 {
  8. width: @secondWidth;
  9. }
  10. .class3 {
  11. width: @secondWidth;
  12. }

Kompilieren

Mit der Erweiterung, welche ich für VS2013 verwende, wird das Kompilieren vollkommen selbstständig nach jedem Speichern des Dokuments durchgeführt. Dies hat den Vorteil, dass die CSS Datei jedes Mal automatisch generiert wird.

Schlusswort

Nach diesem Tutorial sollte man in der Lage sein, dass man die einfachsten Funktionen von Less verwenden kann. Ebenfalls sollte man nun wissen, wie man eine .Less Datei in eine CSS Datei umwandelt.

Less Tutorials

Hier findest du weitere Tutorials, welche mit Less zu tun haben: