SASS Schnellstart / SASS Schnellstart Modul 3 – SASS für Fortgeschrittene
0%
In Bearbeitung

SASS Schnellstart – Funktionen

Neben Variablen sind Sass-Funktionen vielleicht der nützlichste Aspekt der Sprache. Wir werden uns die meisten von ihnen in diesem Kapiteln ansehen.

Zusätzlich zu den Funktionen, die Sass nativ zur Verfügung stellt, kannst du auch deine eigenen Funktionen schreiben. Die vollständige Dokumentation dafür findest du in der Sass-Dokumentation.

Funktionen in SASS

Du kannst die Standard CSS Funktionssyntax verwenden, um Sass Funktionen aufzurufen:

SCSS: rgb() Funktion
p {
  color: rgb(52, 155, 190);
}
CSS:
p { 
   color: #2a9ab3;
}
Sass lässt dich auch die Argumente der Funktion durch ihren Namen spezifizieren. Die meisten Programmiersprachen bezeichnen diese als "benannte Parameter", aber die Sass Dokumentation nennt sie "explizite Schlüsselwortargumente". Wie auch immer du sie nennst, sie können in beliebiger Reihenfolge angegeben werden:
p { 
   color: rgb($red: 42, $blue: 154, $green: 179); 
}

Beachte, dass den Namen der Argumente das Dollarzeichen vorangestellt wird, die gleiche Syntax, die zur Kennzeichnung von Variablen verwendet wird. Glücklicherweise ist der Sass Transpiler schlau genug, um sie gerade zu halten:

SCSS:
#argument {
  color: rgb($rot: 42, $grün: 179, $blau: 154);
}

#variable {
  $rot: 42;
  color: rgb($rot: $rot, $grün: 179, $blau: 154);
}

CSS:

#argument { 
   color: #2ab39a;
}

#variable {
   color: #2ab39a; { 
      #2ab39a;
   }
}

Das Benennen deiner Argumente erfordert ein bisschen mehr Tipparbeit, aber es macht deine Absichten klar und es eliminiert die Notwendigkeit, sich die Reihenfolge der Parameter zu merken (oder nachzuschlagen).

Alle Funktionsdefinitionen verwenden immer die Parameternamen in diesem Sass-Tutorial, z.B. bei der Deklaration str-insert($string, $insert, $index).

Die benannten Parameter (die in beliebiger Reihenfolge angegeben werden können) sind $string, $insert und $index: str-insert($insert: "hello, ", $string: "world", $index: 1) würde "hello, world" zurückgeben.

Sass beinhaltet verschiedene Funktionen für String, Numeric, List, Map, Selector und Introspection. Wir werden alle diese Funktionen in den nächsten Kapiteln sehen.

Verschiedene Funktionen

Sass bietet drei weitere Funktionen, die nicht in eine der oben genannten Kategorien passen. Hier sind sie.

Funktion Beschreibung Beispiele
call($name, $args..) Ruft eine Sass oder CSS Funktion auf und übergibt alle verbleibenden Argumente an die Funktion call(floor, 3, 5, 7, 1) Ergebnis: 1
if($condition, $if-true, $if-false) Gibt $if-true zurück, wenn $condition als true ausgewertet wird, ansonsten $if-false. if(1==1, 10px, 20px) Ergebnis: 10px
unique-id() Gibt einen zufälligen eindeutigen CSS Bezeichner zurück unique-id() Ergebnis: "utewylqbn"

Das war das Wichtigste zu SASS-Funktionen. Das war die letzte Lektion zu SASS. Im letzten Quiz kannst du dein Wissen zu diesem Modul abschließend testen.