Serviceportal-SCSS-Primer

SCS ist eine Teilmenge der Spezifikation „syntaktisch Awesome stylesheets“ (Sass) und eine Erweiterung von CSS. Jedes gültige CSS-Stylesheet ist ein gültiges SCSS.

SCSS-Variablen

SCS-Variablen sind eine Möglichkeit, Informationen zu speichern, die Sie in Ihrem Stylesheet wiederverwenden möchten. Sie können Dinge wie Farben, Schriftartstapel oder jeden CSS-Wert speichern, den Sie Ihrer Meinung nach wiederverwenden möchten. SCS verwendet das $-Symbol, um etwas zu einer Variablen zu machen.

SCS unterstützt die folgenden Datentypen:

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

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

Zum Beispiel:

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

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

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

SCS-Funktionen

Liste der Funktionen für Serviceportal-SCSS-Compiler.

RGB-Funktionen

Funktion	Beschreibung
rgb($rot, $grün, $blau)	Erstellt eine Farbe aus roten, grünen und blauen Werten.
rgba($red, $Green, $Blue, $Alpha)	Erstellt eine Farbe aus roten, grünen, blauen und Alpha-Werten.
Rot($color)	Ruft die rote Komponente einer Farbe ab.
Grün($Farbe)	Ruft die grüne Komponente einer Farbe ab.
Blau($color)	Ruft die blaue Komponente einer Farbe ab.
Mix($color1, $color2, [$weight])	Mischt zwei Farben.

HSL-Funktionen

Funktion	Beschreibung	Verfügbarkeit
hsl($hue, $Sättigung, $Leichtigkeit)	Erstellt eine Farbe aus Farbton-, Sättigungs- und Helligkeitswerten.	Ja
hsla($hue, $Sättigung, $Leichtigkeit, $Alpha)	Erstellt eine Farbe aus Farbton, Sättigung, Helligkeit und Alpha-Werten.	Ja
farbton($color)	Ruft die Farbtonkomponente einer Farbe ab.	Ja
Sättigung($color)	Ruft die Sättigungskomponente einer Farbe ab.	Ja
Helligkeit($color)	Ruft die Helligkeitskomponente einer Farbe ab.	Ja
Adjust-hue($color, $Grad)	Ändert den Farbton einer Farbe.	Ja
Aufhellen($Farbe, $Betrag)	Macht eine Farbe heller.	Ja
Dunkeln($color, $amount)	Macht eine Farbe dunkler.	Ja
Sättigung($Farbe, $Betrag)	Macht eine Farbe gesättigter.	Ja
Entsättigen ($color, $amount)	Macht eine Farbe weniger gesättigt.	Ja
Graustufen($color)	Konvertiert eine Farbe in Graustufen.	Ja
Komplement($color)	Gibt die Ergänzung einer Farbe zurück.	Nein
Umkehren($color)	Gibt den Umbruch einer Farbe zurück.	Nein

Opazitätsfunktionen

Funktion	Beschreibung	Verfügbarkeit
Alpha($color)	Ruft die Alpha-Komponente (Opazität) einer Farbe ab.	Ja
Deckkraft($color)	Ruft die Alpha-Komponente (Opazität) einer Farbe ab.	Ja
rgba($color, $Alpha)	Ändert die Alpha-Komponente für eine Farbe.	Ja
Deckend($Farbe, $Betrag)	Macht eine Farbe deckender.	Nein
Einblenden($color, $amount)	Macht eine Farbe deckender.	Nein
Transparentisieren($color, $amount)	Macht eine Farbe transparenter.	Nein
Ausblenden($color, $amount)	Macht eine Farbe transparenter.	Nein

Andere Farbfunktionen

Funktion	Beschreibung	Verfügbarkeit
Adjust-color()	Erhöht oder verringert eine oder mehrere Komponenten einer Farbe.	Ja
Scale-color()	Skaliert eine oder mehrere Eigenschaften einer Farbe fließend.	Ja
Change-color()	Ändert eine oder mehrere Eigenschaften einer Farbe.	Nein
ie-hex-str()	Konvertiert eine Farbe in das von IE-Filtern verstandene Format.	Nein

Zeichenfolgenfunktionen

Funktion	Beschreibung	Verfügbarkeit
Angebot aufheben($Zeichenfolge)	Entfernt Anführungszeichen aus einer Zeichenfolge.	Ja
Angebot($Zeichenfolge)	Fügt einer Zeichenfolge Anführungszeichen hinzu.	Ja
Str-length($Zeichenfolge)	Gibt die Anzahl der Zeichen in einer Zeichenfolge zurück.	Nein
Str-insert($string, $insert, $index)	Fügt $INSERT in $string bei $index ein.	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 Teilzeichenfolge aus $string.	Nein
In-Großbuchstaben($Zeichenfolge)	Konvertiert eine Zeichenfolge in Großbuchstaben.	Nein
In Kleinbuchstaben ($Zeichenfolge)	Konvertiert eine Zeichenfolge in Kleinbuchstaben.	Nein

Nummernfunktionen

Funktion	Beschreibung	Verfügbarkeit
Prozentsatz($number)	Konvertiert eine Zahl ohne Einheit in einen Prozentsatz.	Ja
Round($number)	Rundet eine Zahl auf die nächste ganze Zahl.	Ja
Ceil($number)	Rundet eine Zahl auf die nächste ganze Zahl auf.	Ja
Stockwerk($number)	Rundet eine Zahl auf die vorherige ganze Zahl ab.	Ja
abs($number)	Gibt den absoluten Wert einer Zahl zurück.	Ja
Min.($Nummern…)	Sucht das Minimum von mehreren Zahlen.	Ja
max.($Nummern…)	Findet das Maximum von mehreren Zahlen.	Ja
Zufällig([$limit])	Gibt eine zufällige Zahl zurück.	Nein

Funktionen auflisten

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

Alle Listenfunktionen funktionieren auch für Karten und behandeln sie als Listen von Paaren.

Funktion	Beschreibung
Länge($Liste)	Gibt die Länge einer Liste zurück.
N($Liste, $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)	Verbindet zwei Listen zu einer.
Anfügen($list1, $val)	Hängt einen einzelnen Wert an das Ende einer Liste an.
ZIP($Listen…)	Kombiniert mehrere Listen zu einer einzigen mehrdimensionalen Liste.
Index($Liste, $Wert)	Gibt die Position eines Werts in einer Liste zurück.
Listentrennzeichen($list)	Gibt das Trennzeichen einer Liste zurück.

Anwenderdefinierte Funktionen werden hinzugefügt

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

SCS-Verschachtelung

Mit SCS können Sie Ihre CSS-Auswahlen so verschachteln, dass sie derselben visuellen Hierarchie Ihrer HTML folgen.

Zum Beispiel:

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

  li { display: inline-block; }

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

Die UL , li , Und A Auswahlen werden innerhalb von geschachtelt navigation Auswahl, die eine großartige Möglichkeit ist, Ihr CSS zu organisieren und lesbarer zu machen. Wenn das Widget gerendert wird, sieht das generierte CSS ungefähr wie der folgende Codeblock 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 unter Sass/SCSS-Referenz .

SCS-Operatoren

SCS verfügt über eine Handvoll standardmäßiger mathematischer Operatoren wie +, -, *, / und %.

Verwenden Sie einfache Mathematik, um Breiten für eine Seite zu berechnen Und artikel. Zum Beispiel:

.container { width: 100%; }

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

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

Die generierte CSS sieht wie folgt 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 unter Sass/SCSS-Referenz .

SCS-Mixins

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

Der folgende Codeblock ist ein Beispiel für Rahmenradius.

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

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

Die generierte CSS sieht wie folgt aus:

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

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