Stringhe in SASS

Questo articolo spiega le stringhe in SASS.

Spiegheremo passo dopo passo dalle operazioni di base sulle stringhe all'uso avanzato delle stringhe in SASS.

YouTube Video

Stringhe in SASS

SASS è un preprocessore per estendere CSS, e le stringhe sono un elemento essenziale per rendere le definizioni di stile più flessibili e dinamiche.

Basi delle stringhe

Le stringhe in SASS possono essere racchiuse tra virgolette singole o doppie, e in alcuni casi le virgolette possono essere omesse per scriverle come identificatori. Di seguito sono riportati esempi di base su come scriverle.

1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;

Note

• Le stringhe tra virgolette vengono valutate direttamente come letterali di stringa.
• Le stringhe senza virgolette sono spesso trattate come identificatori CSS come nomi di classe o ID, quindi bisogna prestare attenzione a usarle correttamente.

Concatenazione di stringhe

In SASS, puoi concatenare le stringhe usando l'operatore +.

1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"

• Questo codice è un esempio di utilizzo dell'operatore + in SASS per concatenare più stringhe e crearne una nuova.

Esempio avanzato: generazione di nomi di classe

1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5    content: $base-class + "--" + $modifier; // "btn--primary"
6}

• Questo codice è un esempio di come utilizzare l'operatore + in SASS per combinare un nome di classe base e un modificatore, generando un nuovo nome di classe.

Uso delle funzioni sulle stringhe

SASS offre comode funzioni integrate per varie operazioni sulle stringhe, come il controllo delle virgolette e l'estrazione di sottostringhe.

quote() e unquote()

Con le funzioni quote() e unquote() è possibile aggiungere o rimuovere virgolette dalle stringhe.

1$quoted: quote(Hello);    // '"Hello"'
2$unquoted: unquote("Hello"); // Hello

str-length($string)

La funzione str-length() ottiene la lunghezza di una stringa.

1$length: str-length("Hello"); // 5

str-insert($string, $insert, $index)

La funzione str-insert() inserisce una stringa nella posizione specificata.

1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"

str-slice($string, $start-at, [$end-at])

La funzione str-slice() estrae una parte di una stringa.

1$substring: str-slice("Hello, World!", 1, 5); // "Hello"

to-upper-case() e to-lower-case()

Le funzioni to-upper-case() e to-lower-case() convertono una stringa rispettivamente in maiuscolo o minuscolo.

1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"

Stringhe nella logica condizionale

Utilizzando la direttiva @if di SASS, puoi ramificare condizionalmente in base ai valori delle stringhe e cambiare gli stili in modo flessibile a seconda di temi e impostazioni.

 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}

• Questo codice è un esempio di utilizzo della direttiva @if in SASS per verificare se il tema è dark e modificare gli stili di conseguenza.

Esempio pratico: generazione dinamica del percorso di immagini di sfondo

Di seguito è riportato un esempio di utilizzo delle manipolazioni di stringa per generare un URL di immagine di sfondo.

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}

Risultato compilato

1.background {
2    background-image: url("/images/background.jpg");
3}

• Questo codice è un esempio di concatenazione di stringhe in SASS per generare dinamicamente il percorso di un'immagine di sfondo e applicarlo come background.

Combinazione con liste e mappe

Combinando liste e mappe SASS con operazioni sulle stringhe, è possibile generare stili in modo più flessibile.

Esempio di lista

1$states: "hover", "focus", "active";
2
3@each $state in $states {
4    .btn-#{$state} {
5        content: "Button in " + $state + " state";
6    }
7}

Risultato compilato

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}

• Questo codice è un esempio di utilizzo della direttiva @each in SASS per generare classi per ogni stato in una lista, impostando dinamicamente i contenuti concatenando le stringhe.

Esempio di mappa

 1$colors: (
 2    "primary": "#3498db",
 3    "secondary": "#2ecc71"
 4);
 5
 6@each $name, $color in $colors {
 7    .text-#{$name} {
 8        color: $color;
 9    }
10}

Risultato compilato

1.text-primary {
2    color: #3498db;
3}
4.text-secondary {
5    color: #2ecc71;
6}

• Questo codice è un esempio di utilizzo di una mappa SASS per associare i nomi dei colori ai valori e generare dinamicamente ogni classe con la direttiva @each.

Escape delle stringhe

Per utilizzare in modo sicuro alcune stringhe come identificatori CSS, potrebbe essere necessario fare l'escape.

1$special_character: "example\\@123";
2.#{$special_character} {
3  content: "This is a valid CSS class.";
4}

Risultato compilato

1.example\@123 {
2    content: "This is a valid CSS class.";
3}

• Questo codice è un esempio di come trattare una stringa contenente caratteri speciali come una variabile in SASS, espanderla con #{$variable} e usarla come un nome di classe valido in CSS.

Conclusione

Le operazioni sulle stringhe in SASS non consistono solo nello scrivere letterali di stringa, ma sono potenti strumenti per costruire stili in modo dinamico. Utilizzando le operazioni e le funzioni di base presentate qui, puoi migliorare la riutilizzabilità e la manutenibilità dei tuoi CSS e progettare i tuoi stili in modo più efficiente.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video