Nella precedente lezione abbiamo introdotto le variabili in Sass. In questa lezione vedremo come effettuare operazioni con le variabili.
Operazioni su stringhe
L’unica operazione consentita sulle stringhe è la concatenazione come mostrato nell’esempio riportato sotto.
/* file style.scss */
$a: "hello ";
$b: "world";
span::before {
content: $a + $b + '!'
}
Dal frammento di codice riportato sopra verrà generato il seguente file.
/* file style.css */
span::before {
content: "hello world!";
}
Operazioni su valori numerici
È possibile eseguire diverse operazioni su valori numerici con o senza unità di misura. Bisogna però prestare particolare attenzione ad alcuni casi specifici. Per esempio a volte l’operazione di divisione fra due numeri senza unità di misura richiede che l’espressione venga circondata da parentesi. Ciò è dovuto al fatto che Sass si prefigge l’obiettivo di mantenere la piena compatibilità con il linguaggio CSS in cui il simbolo ‘/’ viene usato in certe situazioni come separatore. (Per esempio nel caso delle nuove proprietà grid-column o grid-row). Ci sono comunque dei casi in cui è possibile omettere le parentesi tonde, ovvero se:
- l’espressione, o parte di essa, è contenuta in una variabile o restituita da una funzione;
- l’espressione è usata come parte di un’altra espressione aritmetica.
/* file style.scss */
$a: 1 + 1;
$b: 300px + 4px;
$c: 2 * .5em;
$d: 480px / 2;
$e: 16 / 4;
span::after {
content: "$a: #{$a}, $e: #{$e}";
font-size: $c;
width: $b;
height: $d;
// se omettiamo le parentesi
// non verrà eseguita alcuna operazione.
// Nel file CSS avremo semplicemente
// line-height: 3 / 2;
line-height: (3 / 2);
}
Il file risultante conterrà il seguente frammento di codice.
/* file style.css */
span {
content: "$a: 2, $e: 4";
font-size: 1em;
width: 304px;
height: 240px;
line-height: 1.5;
}
Operazioni su colori
Sui colori è possibile eseguire vari tipi di operazioni come possiamo notare dal seguente esempio. Bisogna prestare attenzione ai casi in cui si eseguono operazioni su colori ottenuti tramite la funzione rgba(red, green, blue, alpha). In tali circostanze bisogna assicurarsi che il valore di opacità (alpha) sia uguale per tutti i colori coninvolti nell’operazione.
/* file style.scss */
// forestgreen: #228b22
$color_1: forestgreen + 2; // #228b24
$color_2: #131313 * 2; // #262626
$color_3: #456789 / 2; // #233445
$color_4: rgb(145, 130, 115) - rgb(194, 126, 58); // #000439
$color_5: rgba(47, 153, 91, 0.7)
+ rgba(180, 40, 99, 0.7); // rgba(227, 193, 190, 0.7)
