Service Portal SCSS-Grundkenntnisse

SCSS ist eine Teilmenge der Syntactically Awesome StyleSheets (Sass) -Spezifikation und ist eine Erweiterung von CSS. Jede gültige CSS-Formatvorlage ist gültiges SCSS.

SCSS-Variablen

Mit SCSS-Variablen können Sie Informationen speichern, die Sie in Ihrer Formatvorlage wiederverwenden möchten. Sie können beispielsweise Farben, Schriftstapel oder jeden CSS-Wert speichern, wenn Sie annehmen, dass Sie diese wiederverwenden möchten. SCSS verwendet das Symbol $, um etwas in eine Variable umzuwandeln.

SCSS unterstützt die folgenden Datentypen:

• Zahlen (einschließlich Einheiten)
• Zeichenfolgen (mit Anführungszeichen oder ohne)
• Farben (Name oder Namen)
• Boolesche

Variablen können auch Argumente oder Ergebnisse von mehreren verfügbaren Funktionen oder Mixins sein. Während der Übertragung werden die Werte der Variablen in das CSS-Ausgabedokument eingefügt.

Beispiel:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100%$font-stack;
  color: $primary-color;
}

Weitere Informationen zu Sass finden Sie im Sass / SCSS-Referenz.

SCSS-Funktionen

Liste der Funktionen für den Service Portal SCSS-Compiler.

RGB-Funktionen

Funktion	Beschreibung
rgb ($ rot, $ grün, $ blau)	Erzeugt eine Farbe aus den Werten für Rot, Grün und Blau.
rgba ($ rot, $ grün, $ blau, $ alpha)	Erzeugt eine Farbe aus den Werten für Rot, Grün, Blau und Alpha.
rot($farbe)	Ruft die rote Komponente einer Farbe ab.
grün ($ farbe)	Ruft die grüne Komponente einer Farbe ab.
blau ($ farbe)	Ruft die blaue Komponente einer Farbe ab.
mix($color1, $color2, [$weight])	Mischt zwei Farben zusammen.

HSL-Funktionen

Funktion	Beschreibung	Verfügbarkeit
hsl($hue,$saturation,$lightness)	Erzeugt eine Farbe aus den Werten für Farbton, Sättigung und Helligkeit.	Ja
hsla($hue, $saturation, $lightness, $alpha)	Erzeugt eine Farbe aus den Werten für Farbton, Sättigung, Helligkeit und Alpha.	Ja
hue($color)	Ruft die Farbtonkomponente einer Farbe ab.	Ja
saturation($color)	Ruft die Sättigungskomponente einer Farbe ab.	Ja
Leichtigkeit ($ Farbe)	Ruft die Helligkeitskomponente einer Farbe ab.	Ja
Farbton anpassen ($ color, $ grad)	Ändert den Farbton einer Farbe.	Ja
lighten($color, $amount)	Macht eine Farbe heller.	Ja
dunkler ($ farbe, $ betrag)	Macht eine Farbe dunkler.	Ja
gesättigt ($ farbe, $ betrag)	Macht eine Farbe satter.	Ja
entsättigen ($ farbe, $ betrag)	Macht eine Farbe weniger gesättigt.	Ja
Graustufen ($ color)	Wandelt eine Farbe in Graustufen um.	Ja
Komplement ($ Farbe)	Gibt das Komplement einer Farbe zurück.	Nein
invertieren ($ color)	Gibt die Umkehrung einer Farbe zurück.	Nein

Deckkraftfunktionen

Funktion	Beschreibung	Verfügbarkeit
alpha ($ farbe)	Ruft die Alphakomponente (Deckkraft) einer Farbe ab.	Ja
opacity($color)	Ruft die Alphakomponente (Deckkraft) einer Farbe ab.	Ja
rgba ($ color, $ alpha)	Ändert die Alphakomponente für eine Farbe.	Ja
trüb ($ color, $ betrag)	Macht eine Farbe weniger durchsichtig.	Nein
fade-in($color, $amount)	Macht eine Farbe weniger durchsichtig.	Nein
transparentize($color, $amount)	Macht eine Farbe transparenter.	Nein
fade-out($color, $amount)	Macht eine Farbe transparenter.	Nein

Andere Farbfunktionen

Funktion	Beschreibung	Verfügbarkeit
adjust-color()	Erhöht oder reduziert eine oder mehrere Komponenten einer Farbe.	Ja
scale-color()	Passt eine oder mehrere Eigenschaften einer Farbe fließend an.	Ja
change-color()	Ändert eine oder mehrere Eigenschaften einer Farbe.	Nein
ie-hex-str()	Konvertiert eine Farbe in das Format, das von IE-Filtern verarbeitet werden kann.	Nein

Zeichenfolgenfunktionen

Funktion	Beschreibung	Verfügbarkeit
unquote($string)	Entfernt Anführungszeichen aus einer Zeichenfolge.	Ja
quote($string)	Fügt zu einer Zeichenfolge Anführungszeichen hinzu.	Ja
str-length($string)	Gibt die Anzahl der Zeichen einer Zeichenfolge zurück.	Nein
str-insert($string, $insert, $index)	Fügt $insert zu $string bei $index hinzu.	Nein
str-index($string, $substring)	Gibt den Index des ersten Vorkommens von $substring in $string zurück.	Nein
str-slice($string, $start-at, [$end-at])	Extrahiert eine Unterzeichenfolge aus $string.	Nein
to-upper-case($string)	Wandelt eine Zeichenfolge in Großbuchstaben um.	Nein
to-lower-case($string)	Wandelt eine Zeichenfolge in Kleinbuchstaben um.	Nein

Zahlenfunktionen

Funktion	Beschreibung	Verfügbarkeit
percentage($number)	Wandelt eine Zahl ohne Einheit in einen Prozentsatz um.	Ja
round($number)	Rundet eine Zahl auf die nächste Ganzzahl.	Ja
ceil($number)	Rundet eine Zahl zur nächsten Ganzzahl auf.	Ja
floor($number)	Rundet eine Zahl zur letzten Ganzzahl ab.	Ja
abs($number)	Gibt den absoluten Wert einer Zahl zurück.	Ja
min($numbers…)	Such in mehreren Zahlen die kleinste.	Ja
max($numbers…)	Such in mehreren Zahlen die größte.	Ja
random([$limit])	Gibt eine zufällige Zahl zurück.	Nein

Listenfunktionen

Listen in SCSS sind unveränderbar. Alle Listenfunktionen geben eine neue Liste zurück, anstatt die bestehende Liste zu aktualisieren.

Alle Listenfunktionen können auch für Mappen verwendet werden und behandeln diese als Listenpaare.

Funktion	Beschreibung
length($list)	Gibt die Länge einer Liste zurück.
nth($list, $n)	Gibt ein bestimmtes Element in einer Liste zurück.
set-nth($list, $n, $value)	Ersetzt das n-te Element in einer Liste.
join($list1, $list2)	Fügt zwei Listen zu einer zusammen.
append($list1, $val)	Hängt einen einzelnen Wert an das Ende einer Liste an.
zip($lists…)	Kombiniert mehrere Listen zu einer einzigen multidimensionalen Liste.
index($list, $value)	Gibt die Position eines Wertes in einer Liste zurück.
list-separator($list)	Gibt das Trennzeichen einer Liste zurück.

Benutzerdefinierte Funktionen hinzufügen

Scss @function my-calculation-function($some-number, $another-number){ @return $some-number + $another-number }

SCSS-Verschachtelung

SCSS ermöglicht Ihnen die Verschachtelung Ihrer CSS-Auswahlen auf eine Weise, die der gleichen visuellen Hierarchie Ihrer HTML folgt.

Beispiel:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Die Auswahlen ul, li und a sind in der Auswahl nav verschachtelt, wodurch Sie Ihr CSS besser organisieren und lesbarer gestalten können. Wenn das Widget wiedergegeben wird, sieht das erstellte CSS ähnlich wie der folgende Code aus:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Weitere Informationen zu Sass finden Sie im Sass / SCSS-Referenz.

SCSS-Operatoren

SCSS verfügt über einige mathematische Standardoperatoren wie +, -, *, /, and %.

Verwenden Sie einfache Berechnungen, um die Breiten für eine Seite zu berechnen & Artikel. Beispiel:

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Das generierte CSS sieht folgendermaßen aus:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Weitere Informationen zu Sass finden Sie im Sass / SCSS-Referenz.

SCSS-Mixins

Mit einem Mixin können Sie Gruppen von CSS-Deklarationen erstellen, die Sie auf Ihrer Website wiederverwenden möchten. Sie können Werte übergeben, um Ihr Mixin flexibler zu machen.

Der folgende Codeblock ist ein Beispiel für den Grenzradius.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Das generierte CSS sieht folgendermaßen aus:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Weitere Informationen zu Sass finden Sie im Sass / SCSS-Referenz.