Strings in SASS
Dieser Artikel erklärt Strings in SASS.
Wir erklären Schritt für Schritt von grundlegenden String-Operationen bis hin zur fortgeschrittenen Nutzung von Strings in SASS.
YouTube Video
Strings in SASS
SASS ist ein Präprozessor zur Erweiterung von CSS, und Strings sind ein wesentliches Element, um Stildefinitionen flexibler und dynamischer zu gestalten.
Grundlagen der Strings
Strings in SASS können entweder in einfachen oder doppelten Anführungszeichen eingeschlossen werden, und in manchen Fällen können die Anführungszeichen weggelassen werden, sodass sie wie Bezeichner geschrieben werden. Unten sind grundlegende Beispiele, wie man sie schreibt.
1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;Notizen
- Mit Anführungszeichen versehene Strings werden direkt als String-Literale ausgewertet.
- Strings ohne Anführungszeichen werden oft als CSS-Bezeichner wie Klassennamen oder IDs behandelt, daher sollte man darauf achten, sie angemessen zu verwenden.
String-Verkettung
In SASS kann man Strings mittels des + Operators verketten.
1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"- Dieser Code ist ein Beispiel dafür, wie man in SASS den
+Operator verwendet, um mehrere Strings zu verketten und einen neuen String zu erstellen.
Fortgeschrittenes Beispiel: Klassennamen generieren
1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5 content: $base-class + "--" + $modifier; // "btn--primary"
6}- Dieser Code ist ein Beispiel dafür, wie man in SASS den
+Operator verwendet, um einen Basisklassennamen und einen Modifizierer zu kombinieren und so einen neuen Klassennamen zu erzeugen.
Verwendung von String-Funktionen
SASS stellt praktische eingebaute Funktionen für verschiedene String-Operationen wie Anführungszeichen-Kontrolle und das Extrahieren von Teilstrings zur Verfügung.
quote() und unquote()
Mit den Funktionen quote() und unquote() kann man Anführungszeichen zu Strings hinzufügen oder entfernen.
1$quoted: quote(Hello); // '"Hello"'
2$unquoted: unquote("Hello"); // Hellostr-length($string)
Die Funktion str-length() ermittelt die Länge eines Strings.
1$length: str-length("Hello"); // 5str-insert($string, $insert, $index)
Die Funktion str-insert() fügt einen String an einer bestimmten Position ein.
1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"str-slice($string, $start-at, [$end-at])
Die Funktion str-slice() extrahiert einen Teil eines Strings.
1$substring: str-slice("Hello, World!", 1, 5); // "Hello"to-upper-case() und to-lower-case()
Die Funktionen to-upper-case() und to-lower-case() wandeln einen String jeweils in Groß- bzw. Kleinschreibung um.
1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"Strings in bedingter Logik
Durch die Verwendung der @if-Direktive von SASS kann man anhand von String-Werten bedingt verzweigen und die Stile flexibel je nach Thema und Einstellungen umschalten.
1$theme: "dark";
2
3@if $theme == "dark" {
4 body {
5 background-color: black;
6 color: white;
7 }
8} @else {
9 body {
10 background-color: white;
11 color: black;
12 }
13}- Dieser Code ist ein Beispiel dafür, wie die
@if-Direktive in SASS benutzt wird, um zu prüfen, ob das Themadarkist, und entsprechend die Stile umzustellen.
Praktisches Beispiel: Dynamische Hintergrund-Bildpfade generieren
Unten steht ein Beispiel, wie man mit String-Operationen eine Hintergrundbild-URL generiert.
1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6 background-image: url($image-path + $image-name + $image-extension);
7}Kompiliertes Ergebnis
1.background {
2 background-image: url("/images/background.jpg");
3}- Dieser Code ist ein Beispiel, wie man in SASS Strings verkettet, um dynamisch den Pfad eines Hintergrundbildes zu erzeugen und als Hintergrund einzusetzen.
Kombination mit Listen und Maps
Durch die Kombination von SASS-Listen und Maps mit String-Operationen lassen sich Stile noch flexibler erzeugen.
Listenbeispiel
1$states: "hover", "focus", "active";
2
3@each $state in $states {
4 .btn-#{$state} {
5 content: "Button in " + $state + " state";
6 }
7}Kompiliertes Ergebnis
1.btn-hover {
2 content: "Button in hover state";
3}
4.btn-focus {
5 content: "Button in focus state";
6}
7.btn-active {
8 content: "Button in active state";
9}- Dieser Code ist ein Beispiel, wie man mit der
@each-Direktive in SASS für jeden Zustand in einer Liste eine Klasse generiert und den Inhalt dynamisch durch String-Verkettung setzt.
Map-Beispiel
1$colors: (
2 "primary": "#3498db",
3 "secondary": "#2ecc71"
4);
5
6@each $name, $color in $colors {
7 .text-#{$name} {
8 color: $color;
9 }
10}Kompiliertes Ergebnis
1.text-primary {
2 color: #3498db;
3}
4.text-secondary {
5 color: #2ecc71;
6}- Dieser Code ist ein Beispiel dafür, wie man mit einer SASS-Map Farbnamen mit Werten verknüpft und mit der
@each-Direktive jede Klasse dynamisch generiert.
Strings escapen
Um bestimmte Strings sicher als CSS-Bezeichner zu nutzen, kann ein Escaping erforderlich sein.
1$special_character: "example\\@123";
2.#{$special_character} {
3 content: "This is a valid CSS class.";
4}Kompiliertes Ergebnis
1.example\@123 {
2 content: "This is a valid CSS class.";
3}- Dieser Code ist ein Beispiel dafür, wie man eine Zeichenkette mit Sonderzeichen in SASS als Variable behandelt, sie mit
#{$variable}erweitert und sie als gültigen Klassennamen in CSS verwendet.
Fazit
String-Operationen in SASS sind mehr als das bloße Schreiben von String-Literalen – sie sind mächtige Werkzeuge zum dynamischen Aufbau von Styles. Durch die Nutzung der hier vorgestellten grundlegenden Operationen und Funktionen können Sie die Wiederverwendbarkeit und Wartbarkeit Ihres CSS verbessern und Styles effizienter gestalten.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.