Sass - riscriviamo lo stile

Pensa alle variabili come a un modo per archiviare le informazioni che desideri riutilizzare in tutto il foglio di stile.

Puoi archiviare cose come colori, font o qualsiasi valore CSS che pensi di voler riutilizzare.

Sass usa il simbolo $ per definire una variabile.

Esempio:

$primary-color: #333;  /*definizione di una variabile*/

body {

  color: $primary-color; /*il color del body sarà dunque #333*/

}

Fare matematica nei CSS è molto utile. Sass ha una manciata di operatori matematici standard come +, -, *, / e%.

Di seguito faremo alcuni semplici calcoli per calcolare le larghezze per un articolo e un articolo.

.container {

  width: 100%;

  height: 100px - 50px;

}

Durante la scrittura di HTML probabilmente hai notato che ha una chiara gerarchia nidificata e visiva. CSS, d'altro canto, no.

Sass ti permetterà di nidificare i selettori CSS in un modo che segue la stessa gerarchia visiva del tuo HTML.

Consiglio: non scrivere regole troppo nidificate perchè potresti generare un codice difficile da mantenere.

Di seguito un esempio di regole nidificate (Nesting):

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

  li { display: inline-block; }

  a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

  }

}

Talvolta alcune regole CSS risultano noiose da scrivere, specialmente con CSS3.

Per rendere meno noiosa la struttura del nostro codice Sass ci viene in contro con le mixin.

Una @mixin consente di creare gruppi di dichiarazioni CSS che possono essere riutilizzate in tutto il foglio di stile.

Si possono anche passare dei valori per rendere la mixin più flessibile.

Esempio di mixin:

@mixin transform($property) {

  -webkit-transform: $property;

  -ms-transform: $property;

  transform: $property;

}

.box { @include transform(rotate(30deg)); }

Un altro concetto che possiamo ritrovare in svariati linguaggi di programmazione è quello della funzione.

In Sass è possibile inizializzare una funzione con la seguente sintassi: @function <nomefunzione>(<argomenti...>).

Una funzione ci permette di definire operazioni, più o meno semplici, da riutilizzare in tutto il nostro foglio di stile.

Esempio di funzione:

@function sum($number1, $number2) {

  return $number1 + $number2;

}

.box { width: sum(100px, 200px); }

Non devi scrivere tutto il tuo Sass in un unico file. Puoi dividerlo come preferisci con la regola @use.

Questa regola carica un altro file Sass come modulo, il che significa che puoi fare riferimento alle sue variabili, mixin e funzioni nel tuo file Sass.

L'uso di un file includerà anche il CSS che genera nell'output compilato!

Esempio:

// _base.scss

$primary-color: #333;

body {

  color: $primary-color;

}

// styles.scss

@use 'base';

.inverse {

  background-color: base.$primary-color; /*richiamo la variabile $primary-color definita nel file _base.scss incluso nello styles.scss*/

  color: white;

}

Questa è una delle funzionalità più utili di Sass.

L'uso di @extend ti consente di condividere un set di proprietà CSS da un selettore a un altro. Aiuta a mantenere il tuo Sass PULITO.

Vediamo dunque esempio utilizzando una classe placeholder:

%message-shared { /*classe placeholder*/

  border: 1px solid #ccc;

  padding: 10px;

  color: #333;

}

.message {

  @extend %message-shared;

}

.success {

  @extend %message-shared;

  border-color: green;

}

.error {

  @extend %message-shared;

  border-color: red;

}

.warning {

  @extend %message-shared;

  border-color: yellow;

}

Selettore padre (&):

è un selettore speciale inventato da Sass che viene utilizzato nei selettori nidificati per fare riferimento al selettore esterno.

Consente di riutilizzare il selettore esterno in modi più complessi, come l'aggiunta di una pseudo-classe o l'aggiunta di un selettore prima del genitore.

Un esempio:

.alert {

  &:hover {

    font-weight: bold;

  }

  [dir=rtl] & {

    margin-left: 0;

    margin-right: 10px;

  }

  :not(&) {

    opacity: 0.8;

  }

}

Selettore segnaposto (%):

sembra molto simile a un selettore di classe, ma inizia con una % e non è incluso nell'output CSS.

Il selettore segnaposto può tornare utile per essere esteso.

Sass fornisce una serie di regole @ che consentono di controllare se gli stili vengono emessi o di emetterli più volte con piccole variazioni. Possono anche essere utilizzati in mixin e funzioni per scrivere piccoli algoritmi per rendere più semplice la scrittura del tuo Sass.

Sass supporta quattro regole di controllo del flusso:

• @if controlla se un blocco viene valutato o meno.

• @each valuta un blocco per ciascun elemento in un elenco o ogni coppia in una mappa.

• @for valuta un blocco un certo numero di volte.

• @while valuta un blocco fino a quando non viene soddisfatta una determinata condizione.