Kategorie: LESS

LESS Tutorial
LESS ist eine „Programmiersprache“, aus der CSS generiert werden kann. Die Sprache erweitert sozusagen CSS mit Funktionen und Variablen, wenn du tiefer eintauchst, wirst du noch Mixins kennen lernen und dir gewünscht haben, schon immer mit LESS gearbeitet zu haben.

LESS Vorteile gegenüber von CSS

Die 2 größten Vorteile für Anfänger sind Funktionen und Variablen, dadurch kann man CSS übersichtlicher und dynamischer machen. Du kannst z.B. ein Farbwert in eine Variable speichern und verwendest im restlichen LESS Code diese Variable, falls du dann mal eine neue Farbgebung ausprobieren möchtest, brauchst du nur die Variable zu ändern und an allen LESS Code Stellen wird dieser Farbwert benutzt. Man kann Funktionen definieren, z.B. einen Kreis zeichnen, an diese Funktion wird dann, über ein Parameter, ein Farbwert übergeben und diese Funktion generiert dann einen, immer gleichgroßen, Kreis mit unterschiedlichen Farben. Ich verwende auf meiner Website Funktionen um einen Schatteneffekt in allen Browser unterschiedlichen Werten zu generieren.
```
.shadow(@param) {
  -webkit-box-shadow: @param;
  -moz-box-shadow:    @param;
  box-shadow:         @param;
}
```
Ich habe ein kleines Tool programmiert, mit diesem kannst du LESS Code ausprobieren: LESS im Browser compilieren.

Tutorials zu LESS

installieren, compilieren und minimieren

Um auf deinem Computer LESS Code zu CSS Compilieren, benötigst du Node.js und das dazugehörige Paket. Wie du die Programme installierst und den ersten LESS Code compilierst, lernst du in diesem Tutorial: LESS installieren und anwenden.

in mehrere Dateien aufteilen

Um in großen Projekten dein Code übersichtlich zu halten, empfiehlt es sich, den Code auf mehrere Dateien zu verteilen. Am besten eine Datei für Variablen, eine für Mixins und dann pro Feature eine Datei (Header, Footer oder Autorenbox). LESS Dateien importieren

LESS Variablen

Das beste an LESS, die Variablen. In kürzester Zeit, das komplette Farbschema der Seite überarbeiten. LESS Variablen

Mixins

Hier ist der Part für Fortgeschrittene, die Mixins. Du kannst damit ganze CSS Eigenschaften Vordefinieren und an eine Klasse dranhängen, des weiten sind Mixins über Parameter dynamisch gestaltbar. LESS Mixins
August 21, 2020

LESS Mixins

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
versteckter Mixin
Subelemente im Mixin
Parameterübergabe
!Important
sinnvolles Beispiel für ein Mixin

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

November 28, 2017

LESS Variablen
In LESS können Variablen erstellt werden, in diese man z.B. URL’s, Farbwerte oder Abstände speichern kann um eine höhere Wartbarkeit zu schaffen. Eine Variable fängt mit einem @ an, danach folgt der Name und ein Doppelpunkt, der Inhalt der Variable und ein Semikolon. Bei doppelten Namen wird der zuletzt verwendete Inhalt benutzt.
Variable

Variable definieren:
```
@colorred: #dd0005;
```
Variable verwenden:
```
.redtext {
  a {
    color: @colorred;
  }
}
```
generierte folgendes CSS:
```
.redtext a {
  color: #dd0005;
}
```
Variablennamen doppelt verwenden

Es wird immer der zuletzt zugewiesene Werte in einer Verschachtelung verwendet.
```
@colorred: #dd0004;
.redtext {
  @colorred: #dd0005;
  a {
    @colorred: #dd0006;
    color: @colorred;
    @colorred: #dd0007;
    @colorred: #dd0008;
  }
  color: @colorred;
}
.redtext_pre{
  color: @colorred;
}
```
generierte folgendes CSS:
```
.redtext {
  color: #dd0005;
}
.redtext a {
  color: #dd0008;
}
.redtext_pre {
  color: #dd0004;
}
```
Wirkungsbereich

Wenn Variablen in einer Klasse definiert werden, sind diese auch nur dort gültig.
```
.redtext {
  @colorred: #dd0005;
  color: @colorred;
}
.redtext_pre{
  color: @colorred;
}
```
Gibt folgenden Fehler in der Konsole aus:
```
NameError: variable @colorred is undefined
```
Es ist aber egal ob die Variable vor oder nach der Klasse definiert wird, da die Variablen erst compiliert werden und dann eingesetzt.
```
.redtext {
  color: @colorred;
}
@colorred: #dd0005;
```
generierte folgendes CSS:
```
.redtext {
  color: #dd0005;
}
```
Klassennamen in Varibalen speichern

Es ist möglich Klassennamen in Variablen zu speichern und zu verwenden.
```
@colorred: #dd0005;
@redtext-selector: redtext;

.@{redtext-selector} {
  color: @colorred;
}
.@{redtext-selector}_pre {
  color: @colorred;
}
```
generierte folgendes CSS:
```
.redtext {
  color: #dd0005;
}
.redtext_pre {
  color: #dd0005;
}
```
Variablen linken

Variablen können verknüpft werden, dann erhalten beide Variablen dauerhaft den gleichen Wert.
```
.redtext {
  color: @colorred2;
}
@colorred: #dd0005;
@colorred2: @colorred;
@colorred: #dd0006;
```
generierte folgendes CSS:
```
.redtext {
  color: #dd0006;
}
```
```
.redtext {
  color: @colorred2;
  @colorred: #dd0006;
}
@colorred: #dd0005;
@colorred2: @colorred;
```
generierte folgendes CSS:
```
.redtext {
  color: #dd0006;
}
```
Variablen in Funktionen

Wenn Variablen in Funktionen verwendet werden, wird wieder der zuletzt gespeicherte Wert verwendet.
```
@colorred: red;
@colorred_dark: darken(@colorred, 10%);
.redtext {
  color: @colorred_dark;
}
@colorred: green;
```
generierte folgendes CSS:
```
.redtext {
  color: #004d00;
}
```
#004d00

Zum nächsten Teil: LESS Mixins
Zur Tutorialübersicht: LESS Tutorial
Zum Vorigen Teil: LESS Dateien importieren
November 19, 2017
LESS Dateien importieren
Mit dem Import Befehl können die LESS Dateien auf mehrere aufgeteilt werden und nach und nach geladen werden. In diesem Beispiel werde ich die Farbwerte in die variables.less speichern und die Klassen in die style.less.

@import

style.less
```
@import "variables.less";
.redtext {
  color: @colorred;
  a{
    color: @colorred;
  }
}
.greentext {
  color: @colorgreen;
  a{
    color: @colorgreen;
  }
}
```
variables.less
```
@colorred: #dd0005;
@colorgreen: #00dd00;
```
generierte CSS
```
.redtext {
  color: #dd0005;
}
.redtext a {
  color: #dd0005;
}
.greentext {
  color: #00dd00;
}
.greentext a {
  color: #00dd00;
}
```
(inline) Parameter

Mit dem (inline) Parameter können CSS Dateien dazu geladen werden.

style.less
```
@import (inline) "global.css";
@colorred: #dd0005;

.redtext {
  color: @colorred;
}
```
global.css
```
* {
  margin: 0;
  padding: 0;
}
```
generierte CSS
```
* {
  margin: 0;
  padding: 0;
}

.redtext {
  color: #dd0005;
}
```
(multiple) Parameter

Mit dem (multiple) Parameter können less dateien mehrfach geladen werden, um zum Beispiel andere LESS Dateien zu überschreiben.

style.less
```
@import (multiple) "link.less";
@import (multiple) "link.less";
```
link.less
```
@colorred: #dd0005;

.redtext {
  a {
    color: @colorred;
  }
}
```
generierte CSS
```
.redtext a {
  color: #dd0005;
}
.redtext a {
  color: #dd0005;
}
```
(optional) Parameter

Bei nicht vorhanden LESS Dateien wird der Kompiliervorgang abgebrochen, aber bei dem Parameter (optional) wird die Datei ignoriert und der Prozess läuft weiter.

Zum nächsten Teil: LESS Variablen
Zur Tutorialübersicht: LESS Tutorial
Zum Vorigen Teil: LESS installieren und anwenden
November 18, 2017
LESS installieren und anwenden
LESS ist ein Präprozessor der CSS mit Variablen , Funktionen und Vererbung erweitert. Dadurch kann eine saubere und schnellere Entwicklung von CSS gewährleistet werden. Dieser Beitrag zeigt wie ihr LESS auf dem Computer installiert und LESS compiliert.

Node.js installieren

Node.js ist ein Javascript Server, mit dem lassen sich Javascripte im Backend ausführen. Einfach runterladen und installieren: Downloadseite.

Git installieren

Es ist ratsam noch die Git Konsole zu installieren. Git CLI Downloadseite.

LESS Modul installieren

Öffnet die Konsole, bei Windows einfach in das Suchfeld CMS eintippen und Enter drücken. Danach fügt ihr folgenden Befehl in die Konsole ein:
```
npm install -g less
```
LESS compilieren

Zuerst erstellt ihr eine style.less Datei in eurem Projekt-Verzeichnis. In diese Datei schreibt ihr folgenden LESS Code:
```
@colorred: #dd0005;
@colorgreen: #00dd00;

.redtext {
  color: @colorred;
  a{
    color: @colorred;
  }
}

.greentext {
  color: @colorgreen;
  a{
    color: @colorgreen;
  }
}
```
Mit dem less comman könnt ihr nun die LESS Datei in CSS compilieren.
```
lessc style.less style.css
```
Aus diesem Code wird dann folgende CSS generiert:
```
.redtext {
  color: #dd0005;
}
.redtext a {
  color: #dd0005;
}
.greentext {
  color: #00dd00;
}
.greentext a {
  color: #00dd00;
}
```
LESS minify CSS Datei

Um deine LESS Dateien minimiert (minify, minimize), also so klein wie nur möglich, auszugeben ist folgender Befehl zuständig:

minify installieren
```
npm install less-plugin-clean-css -g
```
minify anwenden
```
lessc -clean-css style.less style.css
```
Jetzt wird deine CSS Datei, ohne Zeilenumbrüche und so wenig wie möglich an Leerzeichen, compiliert. Das hat den Vorteil, dass deine Seite später schneller lädt.

Beispiel
```
@colorred: #dd0005;
@colorgreen: #00dd00;

.redtext {
  color: @colorred;
  a{
    color: @colorred;
  }
}

.greentext {
  color: @colorgreen;
  a{
    color: @colorgreen;
  }
}
```
Der LESS Code wird zu folgenden minimierten CSS:
```
.redtext{color:#dd0005}.redtext a{color:#dd0005}.greentext{color:#0d0}.greentext a{color:#0d0}
```
Zum nächsten Teil: LESS Dateien importieren
Zur Tutorialübersicht: LESS Tutorial
November 18, 2017

Kategorie: LESS

LESS Tutorial

LESS Vorteile gegenüber von CSS

Tutorials zu LESS

installieren, compilieren und minimieren

in mehrere Dateien aufteilen

LESS Variablen

Mixins

LESS Mixins

ausgegebener Mixin

versteckter Mixin

Subelemente im Mixin

Parameterübergabe

Default Wert

!Important

sinnvolles Beispiel für ein Mixin

LESS Variablen

Variable

Variablennamen doppelt verwenden

Wirkungsbereich

Klassennamen in Varibalen speichern

Variablen linken

Variablen in Funktionen

LESS Dateien importieren

@import

style.less

variables.less

generierte CSS

(inline) Parameter

style.less

global.css

generierte CSS

(multiple) Parameter

style.less

link.less

generierte CSS

(optional) Parameter

LESS installieren und anwenden

Node.js installieren

Git installieren

LESS Modul installieren

LESS compilieren

LESS minify CSS Datei

minify installieren

minify anwenden

Beispiel