LESS ist eine Erweiterung für CSS und ist deswegen nicht nur Abwärtskompatibel, sondern die zusätzlichen Features nutzen ebenso CSS Syntax. Dadurch wird das Lernen von LESS ein Kinderspiel. Und notfalls kann man immer noch CSS verwenden.

Variablen

Das ist so ziemlich selbsterklärend:

@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);

#header { color: @light-blue; }

Wird zu:

#header { color: #6c94be; }

Es ist außerdem möglich Variablen mit einem variablen Namen zu definieren:

@fnord: "Ich bin fnord.";
@var: 'fnord';
content: @@var;

Wird umgewandelt zu:

content: "Ich bin fnord.";

Wenn eine Variable doppelt definiert wird, wird die letzte Definition verwendet indem vom aktuellen Geltungsbereich nach oben gesucht wird. Zum Beispiel:

@var: 0;
.class1 {
  @var: 1;
  .class {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

Ergibt:

.class1 .class {
  three: 3;
}
.class1 {
  one: 1;
}

Dies ist ähnlich wie bei CSS selbst wo immer das letzte definierte Attribut ausschlaggebend ist.

Mixins

In LESS können Attribute einer Klasse ganz einfach einer anderen übergeben werden. Wenn wir beispielsweise folgende Klasse nehmen:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Wenn wir diese Attribute nun in einer anderen Klasse verwenden möchten, fügen wir einfach den Namen der Klasse deren Attribute wir übernehmen möchten ein:

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

Die Werte der .bordered Klasse tauchen nun wie durch Magie in #menu a und .post a auf:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Jede beliebige CSS Klasse, id oder element kann so verwendet werden.

Anmerkung: Variablen aus Mixins sind auch im aktuellen Geltungsbereich verfügbar. Dies ist allerdings umstritten und kann sich in Zukungt ändern.

Mixins mit Parametern

LESS bietet eine spezielle Art CSS Regeln zu definieren. Sie können genauso wie Klassen eingesetzt werden, akzeptieren allerdings auch Parameter. Hier ein Beispiel:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Und so werden sie eingesetzt:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}

Es können auch Standardwerte vorgegeben werden:

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

Der Aufruf sieht dann so aus:

#header {
  .border-radius;  
}

Und wird einen 5px border-radius einfügen.

Wenn man einen Mixin ohne Parameter definiert, wird die Klasse nicht im fertigen CSS auftauchen, man kann sie allerdings wie gewohnt in LESS einsetzen.

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

Das würde also folgendes ausgeben. Wie erwartet ist die .wrap Klasse nicht mehr vorhanden.

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

Die Variable @arguments

@arguments hat innerhalb von Mixins eine besondere Bedeutung. Die Variable enthält alle Parameter die beim Aufruf des Mixins mitgegeben wurden. Das ist sehr nützlich wenn man sich nicht um jeden einzelnen Parameter kümmern möchte:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

Das ergibt dann:

  box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

Parameter für Fortgeschrittene und die @rest Variable

Du kannst ... verwenden damit ein Mixin eine variable Anzahl an Parametern akzeptiert. Wenn man dies nach einer Variable verwendet, werden die Parameter der Variable zuweisen.

.mixin (...) {        // akzeptiert 0-N Parameter
.mixin () {           // akzeptiert genau 0 Parameter
.mixin (@a: 1) {      // akzeptiert 0-1 Parameter
.mixin (@a: 1, ...) { // akzeptiert 0-N Parameter
.mixin (@a, ...) {    // akzeptiert 1-N Parameter

Außerdem:

.mixin (@a, @rest...) {
    // @rest enthält alle Parameter nach @a
    // @arguments enthält wie üblich alle Parameter
}

Pattern-matching und Guards

Manchmal möchte man das Verhalten eines Mixins anhand der übergebenen Parameter verändern. Zum Einstieg ein einfaches Beispiel:

.mixin (@s, @color) { ... }

.class {
  .mixin(@switch, #888);
}

Wenn wir nun möchten, dass sich .mixin je nach Inhalt der Variable @switch unterschiedlich verhält, können wir .mixin wie folgt definieren:

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

Wenn wir anschließend folgendes schreiben:

@switch: light;

.class {
  .mixin(@switch, #888);
}

Erhalten wir dieses CSS:

.class {
  color: #a2a2a2;
  display: block;
}

Hier wurde die Farbe, die .mixin übergeben wurde wie erwartet aufgehellt. Wenn der Inhalt von @switch dark gewesen wäre, hätten wir eine dunklere Farbe erhalten.

Das erklärt sich folgendermaßen:

• Die erste Definition von .mixin wurde nicht aufgerufen, weil sie dark als erstes Argument erwartet hat.
• Die zweite Definiton wurde aufgerufen, da sie light erwartet hat.
• Die dritte .mixin Definition wurde ebenfalls aufgerufen, da sie einen beliebigen Parameter akzeptiert.

Es ist auch möglich die Anzahl der Variablen zu prüfen:

.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

Wenn wir .mixin nun mit einem einzelnen Parameter aufrufen, wird die erste Definition verwendet. Bei zwei Parametern wie erwartet die zweite Definition.

Guards

Guards sind nützlich wenn man mathematische Vergleiche nutzen möchte. Wenn du bereits mit funktionalem programmieren vertraut bist wird das für dich nichts Neues sein.

Um so nah wie möglich an der deklarativen Natur von CSS zu bleiben, verwendet LESS guarded mixins anstatt von if/else Anweisungen um zwischen Anweisungen zu unterscheiden. Wir haben hier also eine Ähnliche Syntax wie die @media Anweisung.

Hier ein Beispiel:

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

Das Besondere ist das Schlüsselwort when. Es leitet eine Guard-Anweisung ein. Wenn wir nun folgenden Code schreiben:

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

Erhalten wir dieses Ergebnis:

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

Hier eine komplette Liste von Vergleichsoperatoren die in Guards verwendet werden können: > >= = =< < Alle Werte außer true sind ungleich true. Wenn wir also diese Guards verwenden:

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

Dann werden die Mixins nur aufgerufen wenn als Parameter true übergeben wird.

.class {
  .truth(40); // Passt auf keines der Mixins oben
}

Mehrere Guards werden mit einem Komma ‘,’ getrennt. Wenn einer der Guards true zurückgibt, wird das Mixin aufgerufen.

.mixin (@a) when (@a > 10), (@a < -10) { ... }

Es ist auch möglich Parameter untereinander zu vergleichen. Auch andere Variablen können verwendet werden:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

Es ist außerdem möglich den Typ der Parameter zu prüfen. Dafür werden die is* Funktionen verwendet:

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

Die die verfügbaren Funktionen:

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

Man kann auch auf die Einheit des übergebenen Wertes prüfen:

• ispixel
• ispercentage
• isem

Nicht zuletzt kannst du das Schlüsselwort and verwenden um mehrere Bedingungen innerhalb eines Guards zu prüfen:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

Und not um Bedingungen zu verneinen:

.mixin (@b) when not (@b > 0) { ... }

Verschachtelte Regeln

Mit LESS kann man neben dem üblichen cascading auch nesting - also das Verschachteln von Regeln - einsetzen. So kann man etwa das folgende CSS…

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

… in LESS so schreiben:

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

Oder so:

#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

The resulting code is more concise, and mimics the structure of your DOM tree. Dadurch ist der Code kompakter und gleicht der Struktur des Dom trees-

Wichtig ist hier der & Kombinator. Er wird als Platzhalter für das Elternelement verwendet. Das ist besonders für Pseudoklassen wie :hover und :focus praktisch.

Hier ein Beispiel:

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

Das ergibt:

.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

Verschachtelte Media Queries

Media queries können genauso wie Selektoren verschachtelt werden:

.one {
    @media (width: 400px) {
        font-size: 1.2em;
        @media print and color {
            color: blue;
        }
    }
}

Ergibt:

@media (width: 400px) {
  .one {
    font-size: 1.2em;
  }
}
@media (width: 400px) and print and color {
  .one {
    color: blue;
  }
}

Fortgeschrittene Verwendung von &

Das & Symbol kann in Selektoren verwendet werden um die Reihenfolge der Verschachtelung umzudrehen oder um Klassen zu multiplizieren. Sieh dir dazu das folgende Beispiel an:

.child, .sibling {
    .parent & {
        color: black;
    }
    & + & {
        color: red;
    }
}

Ergibt

.parent .child,
.parent .sibling {
    color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
    color: red;
}

Du kannst & auch in Mixins verwenden um etwas zu referenzieren, was außerhalb von dem Mixin liegt.

Berechnungen

Es kann mit jeder Zahl, Farbe oder Variable gerechnet werden. Hier einige Beispiele:

@base: 5%;
@filler: (@base * 2);
@other: (@base + @filler);

color: (#888 / 4);
background-color: (@base-color + #111);
height: (100% / 2 + @filler);

Das Ergebnis ist genau so wie wir es erwarten - LESS versteht den Unterschied zwischen Farben und Einheiten. Wenn eine Einheit in einer Berechnung enthalten ist, wird LESS sie beibehalten:

@var: (1px + 5);

Wir erhalten also 6px.

Auch Klammern können verwendet werden:

width: (@var + 5) * 2;

Auch extra Klammern sind erlaubt:

width: ((@var + 5) * 2);

Funktionen

LESS bietet eine Vielzahl an Funktionen die Farben transformieren, Strings verändern und Mathematische Funktionen ausführen. Sie sind vollständig in der Funktionsreferenz dokumentiert.

Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees: Die Verwendung ist recht einfach. Das folgende Beispiel verwendet Prozente um 0.5 in 50% umzuwandeln, erhöht die Sättigung einer Grundfarbe um 5% und setzt die Hintergrundfarbe auf eine Farbe die um 25% heller und um 8 Grad gedreht ist:

@base: #f04615; @width: 0.5;

.class { width: percentage(0.5); // ergibt 50% color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); }

Namespaces

Manchmal ist es sinnvoll deine Variablen und Mixins zu gruppieren. Das sorgt für bessere Organisation und Abkapselung. Das Ganze ist recht intuitiv. Wenn du einige Mixins und Variablen unter #bundle gruppieren möchtest geht das so:

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

Wenn wir nun .button zu #header a hinzufügen möchten schreiben wir folgendes:

#header a {
  color: orange;
  #bundle > .button;
}

Geltungsbereich

Der Geltungsbereich in LESS funktioniert so wie in Programmiersprachen. Zuerst werden Variablen und Mixins lokal gesucht und falls sie nicht gefunden werden im nächst höheren Geltungsbereich.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red
}

Kommentare

Die üblichen CSS Kommentare bleiben in LESS erhalten.

/* Ich bin ein CSS Kommentar */
.class { color: black }

In LESS können auch einzeilige Kommentare verwendet werden. Sie erscheinen allerdings nicht im fertigen CSS.

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

Importieren

Du kannst .less Dateien importieren. Dadurch sind dann alle Variablen und Mixins verfügbar. Die Erweiterung .less ist optional:

@import "lib.less";
@import "lib";

Wenn eine Datei bereits eine Dateiendung oder Parameter hat, wird “.less” nicht angefügt. Wenn du eine CSS Datei nur importieren möchtest und nicht willst, dass LESS sie verarbeitet nutze einfach die .css Dateiendung:

@import "lib.css";

Dadurch wird der CSS Code aus der lib.css einfach in die aktuelle Datei eingefügt.

Wenn du eine Datei nur importieren möchtest wenn sie nicht bereits importiert wurde, kannst du @import-once verwenden.

@import-once "lib.less";
@import-once "lib.less"; // will be ignored

@import-once wird ab 1.4.0 das Standardverhalten von @import sein.

String interpolation

Variablen können, ähnlich wie bei ruby oder PHP, in Strings eingebaut werden. Dafür gibt es das @{name} Konstrukt:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

Escapen

Manchmal braucht man CSS welches entweder kein valides CSS ist, oder welches LESS nicht erkennen kann. Solche Werte kann man ausgeben indem man sie mit einem ~beginnen lässt:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

Das Ergebnis ist dann:

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

Selektor Interpolation

Wenn du LESS Variablen innerhalb von Selektoren verwenden möchtest, kannst du das tun indem du die Variable mit @{selektor} in einen String umwandelst. Zum Beispiel:

@name: blocked;
.@{name} {
    color: black;
}

Ergibt

.blocked {
    color: black;
}

Anmerkung: Vor LESS 1.3.1 war dies hier unterstützt: (~"@{name}"). Der Support dafür wird in Version 1.4.0 entfernt werden.

JavaScript

Auch JavaScript kann in LESS verwendet werden. Wir empfehlen allerdings auf dieses Feature wenn möglich zu verzichten, da LESS von Ports (wie z.B. lessphp) dann nicht mehr compiliert werden kann und es schwieriger wird less zu warten. Wenn möglich, versuche dir eine Funktionalität auszudenken die das Gleiche erreicht und frage auf Github danach. Wir haben auch Pläne, die es erlauben werden die Funktionalität von LESS zu erweitern. Wenn du trotzdem JavaScript in LESS verwenden möchtest, musst du den Ausdruck in Backticks “`” setzen.

@var: `"hallo".toUpperCase() + '!'`;

Wird zu:

@var: "HALLO!";

Es ist auch möglich Interpolation und Escapen gleichzeitig zu verwenden:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

Wird zu:

@var: HELLO!;

Du kannst sogar auf die JavaScript Objekte wie document zugreifen!

@height: `document.body.clientHeight`;

Wenn du einen JavaScript String in eine HEX-Farbe umwandeln möchtest kannst du die color Funktion verwenden:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

Index

escape(@string);             // Ein URL kodierter String

ceil(@number);               // Rundet auf zu einem Integer
floor(@number);              // Rundet ab zu einem Integer
percentage(@number);         // Konvertiert zu %, z.B. 0.5 -> 50%
round(number, [places: 0]);  // Rundet eine Zahl zu einer Zahl mit places Nachkommastellen

rgb(@r, @g, @b);                             // Konvertiert zu einer Farbe
rgba(@r, @g, @b, @a);                        // Konvertiert zu einer Farbe
argb(@color);                                // Erstellt: #AARRGGBB
hsl(@hue, @saturation, @lightness);          // Erstellt eine Farbe
hsla(@hue, @saturation, @lightness, @alpha); // Erstellt eine Farbe
hsv(@hue, @saturation, @value);              // Erstellt eine Farbe
hsva(@hue, @saturation, @value, @alpha);     // Erstellt eine Farbe

hue(@color);        // Gibt den `Farbton` von @color zurück
saturation(@color); // Gibt den `Sättigungs` Kanal von @color zurück
lightness(@color);  // Gibt den 'Helligkeits' Kanal von @color zurück
red(@color);        // Gibt den 'roten' Kanal von @color zurück
green(@color);      // Gibt den 'grünen' Kanal von @color zurück
blue(@color);       // Gibt den 'blauen' Kanal von @color zurück
alpha(@color);      // Gibt den 'alpha' Kanal von @color zurück
luma(@color);       // Gibt den 'luma' Wert (wahrgenommene Helligkeit) von @color zurück

saturate(@color, 10%);   // Gibt eine Farbe zurück, die 10% Punkte *mehr* gesättigt ist
desaturate(@color, 10%); // Gibt eine Farbe zurück, die 10% Punkte *weniger* gesättigt ist
lighten(@color, 10%);    // Gibt eine Farbe zurück, die 10% Punkte *heller* ist
darken(@color, 10%);     // Gibt eine Farbe zurück, die 10% Punkte *dunkler* ist
fadein(@color, 10%);     // Gibt eine Farbe zurück, die 10% Punkte *weniger* transparent ist
fadeout(@color, 10%);    // Gibt eine Farbe zurück, die 10% Punkte *mehr* transparent ist
fade(@color, 50%);       // Gibt @color mit 50% Transparenz zurück
spin(@color, 10);        // Gibt @color mit 10 Grad höherem Farbton zurück
mix(@color1, @color2, [@weight: 50%]);  // Gibt einen Mix aus @color1 und @color2 zurück
greyscale(@color);       // Gibt einen Grauton, eine zu 100% entsättigte Farbe zurück
contrast(@color1, @darkcolor, @lightcolor);
    // Gibt @darkcolor zurück, wenn @color1 mehr als 43% Luma hat
    // ansonsten gib $lightcolor zurück

multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);

String Funktionen

escape

Wendet URL-encoding auf =, :, #, ;, ( und ) an.

Parameter:

• string: Ein zu escapender String

Gibt zurück: string

Beispiel:

escape('a=1')

Ausgabe:

a%3D1

Mathematische Funktionen

ceil

Rundet auf zu einem Integer

Parameter:

• number: Ein Float

Gibt zurück: integer

Beispiel:

ceil(2.4)

Ausgabe:

3

floor

Rundet ab zu einem Integer

Parameter:

• number: Ein Float

Gibt zurück: integer

Beispiel:

floor(2.6)

Ausgabe:

2

percentage

Konvertiert einen Float zu einen Prozent String

Parameter:

• number: Ein Float

Ausgabe: string

Beispiel:

percentage(0.5)

Ausgabe:

50%

round

Rundet.

Parameter:

• number: Ein Float
• decimalPlaces: Optional: Die Anzahl der Dezimalstellen auf die gerundet werden soll. Default: 0

Ausgabe: number

Beispiel:

round(1.67)

Ausgabe:

2

Beispiel:

round(1.67, 1)

Ausgabe:

1.7

Farbfunktionen

Farbdefinition

rgb

Erstellt eine Farbe ohne Transparenz von dezimalen Rot-, Grün- und Blauwerten. Es können auch Literale als Farbewerte wie in normalem HTML/CSS verwendet werden um Farben zu definieren. Zum Beispiel #ff0000.

Parameter:

• red: Eine Zahl 0-255.
• green: Eine Zahl 0-255.
• blue: Eine Zahl 0-255.

Ausgabe: color

Beispiel:

rgb(90, 129, 32)

Ausgabe:

#5a8120

rgba

Erstellt ein transparentes Farbobjekt von dezimalen Rot-, Grün, Blau- und Alphawerten.

Parameter:

• red: Eine Zahl 0-255.
• green: Eine Zahl 0-255.
• blue: Eine Zahl 0-255.
• alpha: Eine Zahl 0-255.

Ausgabe: color

Beispiel:

rgba(90, 129, 32, 0.5)

Ausgabe:

rgba(90, 129, 32, 0.5)

argb

Erstellt eine Hexadezimale Version der Farbe im #AARRGGBB Format (NICHT #RRGGBBAA!).

Parameter:

• color: Ein Farbobjekt

Ausgabe: string

Beispiel:

argb(rgba(90, 23, 148, 0.5));

Ausgabe:

#805a1794

hsl

Erstellt ein Farbobjekt ohne Transparenz von Farbton-, Sättigungs- und Helligkeitswerten.

Parameter:

• hue: Eine Gradzahl von 0-360.
• saturation: Eine Prozentzahl von 0-100%.
• lightness: Eine Prozentzahl von 0-100%.

Ausgabe: color

Beispiel:

hsl(90, 100%, 50%)

Ausgabe:

#80ff00

Das ist nützlich wenn man eine neue Farbe anhand von einem anderen Farbkanal erstellen möchte. Ein Beispiel:

@new: hsl(hue(@old), 45%, 90%);

@new wird @old’s Farbton haben, aber seine eigene Sättigung und Helligkeit.

hsla

Erstellt ein transparentes Farbobjekt von Farbton-, Sättigungs- und Helligkeitswerten.

Parameter:

• hue: Eine Gradzahl von 0-360
• saturation: Eine Prozentzahl von 0-100%.
• lightness: Eine Prozentzahl von 0-100%.
• alpha: Ein Float zwischen 0-1

Ausgabe: color

Beispiel:

hsl(90, 100%, 50%, 0.5)

Ausgabe:

rgba(128, 255, 0, 0.5)

hsv

Erstellt ein Farbobjekt ohne Transparenz von Farbton-, Sättigungswert und Dunkelstufe. Dies ist nicht das Gleiche wie hsl.

Parameter:

• hue: Eine Gradzahl von 0-360.
• saturation: Eine Prozentzahl von 0-100%.
• value: Eine Prozentzahl von 0-100%.

Ausgabe: color

Beispiel:

hsv(90, 100%, 50%)

Ausgabe:

hsva

Erstellt ein transparentes Farbobjekt von Farbton-, Sättigungswert und Dunkelstufe. Dies ist nicht das Gleiche wie hsla.

Parameter:

• hue: Eine Gradzahl von 0-360.
• saturation: Eine Prozentzahl von 0-100%.
• value: Eine Prozentzahl von 0-100%.
• alpha: Ein Float zwischen 0-1.

Ausgabe: color

Beispiel:

hsva(90, 100%, 50%, 0.5)

Ausgabe:

Farbkanal Information

hue

Extrahiert den Farbton Kanal von einem Farbobjekt

Parameter:

• color: Ein Farbobjekt

Ausgabe: integer 0-360

Beispiel:

hue(hsl(90, 100%, 50%))

Ausgabe:

90

saturation

Extrahiert den Sättigungskanal von einem Farbobjekt

Parameter:

• color: Ein Farbobjekt

Ausgabe: percentage 0-100

Beispiel:

saturation(hsl(90, 100%, 50%))

Ausgabe:

100%

lightness

Extrahiert den Helligkeitskanal von einem Farbobjekt

Parameter:

• color: Ein Farbobjekt

Ausgabe: percentage 0-100

Beispiel:

lightness(hsl(90, 100%, 50%))

Ausgabe:

50%

red

Extrahiert den roten Kanal von einem Farbobjekt

Parameter:

• color: Ein Farbobjekt

Ausgabe: integer 0-255

Beispiel:

red(rgb(10, 20, 30))

Ausgabe:

10

green

Extrahiert den grünen Kanal von einem Farbobjekt

Parameter:

• color: Ein Farbobjekt

Ausgabe: integer 0-255

Beispiel:

green(rgb(10, 20, 30))

Ausgabe:

20

blue

Extrahiert den blauen Kanal von einem Farbobjekt

Parameter:

• color: Ein Farbobjekt

Ausgabe: integer 0-255

Beispiel:

blue(rgb(10, 20, 30))

Ausgabe:

30

alpha

Extrahiert den alpha Kanal von einem Farbobjekt

Parameter:

• color: Ein Farbobjekt

Ausgabe: float 0-1

Beispiel:

alpha(rgba(10, 20, 30, 0.5))

Ausgabe:

0.5

luma

Berechnet den luma) (wahrgenommene Helligkeit) Wert von einem Farbobjekt Nutzt SMPTE C / Rec. 709 Koeffizienten wie in WCAG 2.0 vorgeschlagen. Diese Berechnung wird ebenfalls in der contrast Funktion verwendet.

Parameter:

• color: Ein Farbobjekt

Ausgabe: percentage 0-100%

Beispiel:

luma(rgb(100, 200, 30))

Ausgabe:

65%

Farboperationen

Farboperationen akzeptieren generell die Parameter in den gleichen Einheiten in denen Sie sie ändern. Prozentwerte werden absolut behandelt. Wenn man also einen 10% Wert um 10% erhöht, erhält man 20% und nicht 11%. Die Werte werden außerdem in den erlaubten Bereichen gehalten.

saturate

Erhöht die Sättigung einer Farbe um einen absoluten Wert.

Parameter:

• color: Ein Farbobjekt
• amount: Eine Prozentzahl von 0-100%.

Ausgabe: color

Beispiel:

saturate(hsl(90, 90%, 50%), 10%)

Ausgabe:

#80ff00 (hsl(90, 100%, 50%))

desaturate

Vermindert die Sättigung einer Farbe um einen absoluten Wert.

Parameter:

• color: Ein Farbobjekt
• amount: Eine Prozentzahl von 0-100%.

Ausgabe: color

Beispiel:

desaturate(hsl(90, 90%, 50%), 10%)

Ausgabe:

#80e51a (hsl(90, 80%, 50%))

lighten

Erhöht die Helligkeit einer Farbe um einen absoluten Wert.

Parameter:

• color: Ein Farbobjekt
• amount: Eine Prozentzahl 0-100%.

Ausgabe: color

Beispiel:

lighten(hsl(90, 90%, 50%), 10%)

Ausgabe:

#99f53d (hsl(90, 90%, 60%))

darken

Vermindert die Helligkeit einer Farbe um einen absoluten Wert.

Parameter:

• color: Ein Farbobjekt
• amount: Eine Prozentzahl von 0-100%.

Ausgabe: color

Beispiel:

darken(hsl(90, 90%, 50%), 10%)

Ausgabe:

#66c20a (hsl(90, 90%, 40%))

fadein

Vermindert die Transparenz (oder erhöht die Deckkraft) einer Farbe. Dies hat keinen Effekt auf Farben ohne Transparenz. Die entgegengesetzte Funktion heißt fadeout.

Parameter:

• color: Ein Farbobjekt
• amount: Eine Prozentzahl von 0-100%.

Ausgabe: color

Beispiel:

fadein(hsla(90, 90%, 50%, 0.5), 10%)

Ausgabe:

rgba(128, 242, 13, 0.6) (hsla(90, 90%, 50%, 0.6))

fadeout

Erhöht die Transparenz (oder vermindert die Deckkraft) einer Farbe. Dies hat keinen Effekt auf Farben ohne Transparenz. Die entgegengesetzte Funktion heißt fadein.

Parameter:

• color: Ein Farbobjekt
• amount: Eine Prozentzahl von 0-100%.

Ausgabe: color

Beispiel:

fadeout(hsla(90, 90%, 50%, 0.5), 10%)

Ausgabe:

rgba(128, 242, 13, 0.4) (hsla(90, 90%, 50%, 0.6))

fade

Setzt die absolute Transparenz einer Farbe. Kann auch auf Farben angewendet werden die noch nicht Transparent sind.

Parameter:

• color: Ein Farbobjekt
• amount: Eine Prozentzahl von 0-100%.

Ausgabe: color

Beispiel:

fade(hsl(90, 90%, 50%), 10%)

Ausgabe:

rgba(128, 242, 13, 0.1) (hsla(90, 90%, 50%, 0.1))

spin

Rotiert den Farbwert einer Farbe in eine Richtung. Es ist auch möglich Werte größer als 360 oder kleiner als 0 anzugeben. 720 wäre etwa das gleiche wie 360. Anzumerken ist, dass Farben zu RGB konvertiert werden wodurch der Farbton nicht beibehalten wird (Da der Farbton bei Farben ohne Sättigung keine Relevanz hat). Beispielsweise sollte man dies also nicht tun:

@c: saturate(spin('#aaaaaa', 10), 10%);

Sondern dies:

@c: spin(saturate('#aaaaaa', 10%), 10);

Farben werden immer als RGB Werte zurück gegeben, spin auf einen Grauwert anzuwenden wird also nichts verändern.

Parameter:

• color: Ein Farbobjekt
• angle: Eine Gradzahl um die rotiert werden soll (+ oder -)

Ausgabe: color

Beispiel:

spin(hsl(10, 90%, 50%), 20)
spin(hsl(10, 90%, 50%), -20)

Ausgabe:

#f27f0d (hsl(30, 90%, 50%))
#f20d33 (hsl(350, 90%, 50%))

mix

Mixe zwei Farben in variablem Verhältnis. Auch Transparenz wird hier berücksichtigt.

Parameter:

• color1: Ein Farbobjekt
• color1: Ein Farbobjekt
• weight: Optional, eine Prozentangabe um die Gewichtung zwischen den Farben festzulegen. Default: 50

Ausgabe: color

Beispiel:

mix(#ff0000, #0000ff, 50)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50)

Ausgabe:

#800080
rgba(75, 25, 0, 0.75);

greyscale

Entfernt alle Sättigungswerte von einer Farbe. Da die Sättigung allerdings nicht vom Farbton abhängt, könnten die Ergebnisse seltsam aussehen. Luma könnte also bessere Resultate liefern.

Parameter:

• color: Ein Farbobjekt

Ausgabe: color

Beispiel:

greyscale(hsl(90, 90%, 50%))

Ausgabe:

#808080 (hsl(90, 0%, 50%))

contrast

Entscheidet welcher der beiden Werte einen höheren Kontrast bietet. Dies ist nützlich um sicher zu gehen, dass eine Farbe auf einem Hintergrund lesbar bleibt. Diese Funktion funktioniert genauso wie die contrast Funktion in Compass für SASS. Im Einklang mit WCAG 2.0 werden die Farben anhand ihres Luma Wertes und nicht anhand der Helligkeit verglichen.

Parameter:

• color: Ein Farbobjekt mit dem verglichen wird
• dark: Eine dunkle Farbe (Standard ist Schwarz).
• light: Eine helle Farbe (Standard ist Weiß).
• threshold: Eine Prozentzahl von 0-100% die festlegt, wann “dunkel” und wann “hell” verwendet wird (Standard ist 43%). Man sollte hier für helle Farbpaletten eher einen niedrigen Wert wählen, für dunkle einen höheren.

Ausgabe: color

Beispiel:

contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)
contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);
contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);

Ausgabe:

#000000 (black)
#ffffff (white)
#dddddd
#000000 (black)
#ffffff (white)

Farbmischungen

Diese Funktionen sind ähnlich wie die, die man in Photoeditoren wie Photoshop, Firework oder GIMP findet. Sie können also dazu verwendet werden, dass die CSS Farben zu denen aus deinen Bildern passen.

multiply

Multipliziert zwei Farben. Die RGB Kanäle der beiden Farben werden multipliziert und durch 255 geteilt. Das Ergebnis ist eine dunklere Farbe.

Parameter:

• color1: Ein Farbobjekt das multipliziert wird.
• color2: Ein Farbobjekt das multipliziert wird.

Ausgabe: color

Beispiele:

multiply(#ff6600, #000000);

multiply(#ff6600, #333333);

multiply(#ff6600, #666666);

multiply(#ff6600, #999999);

multiply(#ff6600, #cccccc);

multiply(#ff6600, #ffffff);

multiply(#ff6600, #ff0000);

multiply(#ff6600, #00ff00);

multiply(#ff6600, #0000ff);

screen

Das Gegenteil von multiply. Das Ergebnis ist eine hellere Farbe.

Parameter:

• color1: Ein Farbobjekt auf das screen angewendet wird.
• color2: Ein Farbobjekt auf das screen angewendet wird.

Ausgabe: color

Beispiele:

screen(#ff6600, #000000);

screen(#ff6600, #333333);

screen(#ff6600, #666666);

screen(#ff6600, #999999);

screen(#ff6600, #cccccc);

screen(#ff6600, #ffffff);

screen(#ff6600, #ff0000);

screen(#ff6600, #00ff00);

screen(#ff6600, #0000ff);

overlay

Kombiniert die Effekte von multiply und screen. Macht helle Kanäle heller und dunkle dunkler. Anmerkung: Relevant für die Entscheidung sind die Werte der ersten übergebenen Farbe.

Parameter:

• color1: Eine Farbe auf die overlay angewendet wird. Dies ist die entscheidende Farbe ob das Ergebnis heller oder dunkler wird.
• color2: Eine Farbe auf die overlay angewendet wird.

Ausgabe: color

Beispiele:

overlay(#ff6600, #000000);

overlay(#ff6600, #333333);

overlay(#ff6600, #666666);

overlay(#ff6600, #999999);

overlay(#ff6600, #cccccc);

overlay(#ff6600, #ffffff);

overlay(#ff6600, #ff0000);

overlay(#ff6600, #00ff00);

overlay(#ff6600, #0000ff);

softlight

Ähnlich wie overlay, verhindert aber, dass reines Schwarz in reines Schwarz resultiert und reines Weiß in reines Weiß.

Parameter:

• color1: Eine Farbe auf die softlight angewendet wird.
• color2: Eine Farbe auf die softlight angewendet wird.

Ausgabe: color

Beispiele:

softlight(#ff6600, #000000);

softlight(#ff6600, #333333);

softlight(#ff6600, #666666);

softlight(#ff6600, #999999);

softlight(#ff6600, #cccccc);

softlight(#ff6600, #ffffff);

softlight(#ff6600, #ff0000);

softlight(#ff6600, #00ff00);

softlight(#ff6600, #0000ff);

hardlight

Ähnlich wie overlay, nutzt aber die zweite Farbe um helle und dunkle Kanäle auszusuchen anstatt der Ersten.

Parameter:

• color1: Eine Farbe auf die hardlight angewendet wird.
• color2: Eine Farbe auf die hardlight angewendet wird. Dies ist die entscheidende Farbe ob das Ergebnis heller oder dunkler wird.

Ausgabe: color

Beispiele:

hardlight(#ff6600, #000000);

hardlight(#ff6600, #333333);

hardlight(#ff6600, #666666);

hardlight(#ff6600, #999999);

hardlight(#ff6600, #cccccc);

hardlight(#ff6600, #ffffff);

hardlight(#ff6600, #ff0000);

hardlight(#ff6600, #00ff00);

hardlight(#ff6600, #0000ff);

difference

Subtrahiert die zweite Farbe von der Ersten. Die Operation wird auf den RGB Kanälen ausgeführt. Das Ergebnis ist eine dunklere Farbe.

Parameter:

• color1: Ein Farbobjekt das den Minuenden darstellt.
• color2: Ein Farbobjekt das den Subtrahenden darstellt.

Ausgabe: color

Beispiele:

difference(#ff6600, #000000);

difference(#ff6600, #333333);

difference(#ff6600, #666666);

difference(#ff6600, #999999);

difference(#ff6600, #cccccc);

difference(#ff6600, #ffffff);

difference(#ff6600, #ff0000);

difference(#ff6600, #00ff00);

difference(#ff6600, #0000ff);

exclusion

Ähnlicher Effekt wie difference mit niedrigerem Kontrast.

Parameter:

• color1: Ein Farbobjekt das den Minuenden darstellt.
• color2: Ein Farbobjekt das den Subtrahenden darstellt.

Ausgabe: color

Beispiele:

exclusion(#ff6600, #000000);

exclusion(#ff6600, #333333);

exclusion(#ff6600, #666666);

exclusion(#ff6600, #999999);

exclusion(#ff6600, #cccccc);

exclusion(#ff6600, #ffffff);

exclusion(#ff6600, #ff0000);

exclusion(#ff6600, #00ff00);

exclusion(#ff6600, #0000ff);

average

Berechnet den Durchschnitt von zwei Farben. Die Operation wird auf die RGB Kanäle angewendet.

Parameter:

• color1: Ein Farbobjekt
• color2: Ein Farbobjekt

Ausgabe: color

Beispiele:

average(#ff6600, #000000);

average(#ff6600, #333333);

average(#ff6600, #666666);

average(#ff6600, #999999);

average(#ff6600, #cccccc);

average(#ff6600, #ffffff);

average(#ff6600, #ff0000);

average(#ff6600, #00ff00);

average(#ff6600, #0000ff);

negation

Das Gegenteil von difference. Das Ergebnis ist eine hellere Farbe.

Parameter:

• color1: Ein Farbobjekt das den Minuenden darstellt.
• color2: Ein Farbobjekt das den Subtrahenden darstellt.

Ausgabe: color

Beispiel:

negation(#ff6600, #000000);

negation(#ff6600, #333333);

negation(#ff6600, #666666);

negation(#ff6600, #999999);

negation(#ff6600, #cccccc);

negation(#ff6600, #ffffff);

negation(#ff6600, #ff0000);

negation(#ff6600, #00ff00);

negation(#ff6600, #0000ff);