Sass

È l'acronimo di "Syntactically Awesome Style Sheets." Sass è un'estensione dei fogli di stile a cascata (CSS), il linguaggio usato per definire il layout e la formattazione dei documenti HTML. Utilizza la sintassi CSS pienamente compatibile, ma offre funzionalità aggiuntive, come le variabili CSS e le regole annidate, che rendono il CSS più efficiente e facile da modificare.

Uno degli svantaggi del CSS standard è che non supporta le variabili. Per esempio, se hai più stili dello stesso colore, devi definire il colore separatamente per ogni stile. Se decidi di cambiare il colore, devi modificarlo per ogni occorrenza nel documento CSS. Con Sass puoi definire il colore come variabile e assegnare la variabile a ogni stile che la utilizza. Se decidi di cambiare il colore, devi modificarlo una sola volta, nel punto in cui è definito inizialmente nel documento.

L'esempio seguente mostra come definire e usare una variabile CSS in Sass.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass supporta anche le regole annidate, che permettono agli sviluppatori di scrivere codice più efficiente. Nell'esempio seguente, la classe .button è annidata nello stile #top p.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

Una volta compilato, il codice precedente produrrà il seguente CSS:

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

Sebbene Sass offra diversi vantaggi agli sviluppatori web, i documenti Sass non vengono riconosciuti dai browser web. Pertanto, un file Sass deve prima essere compilato in CSS prima di poter essere usato in un documento HTML. Questa operazione può essere eseguita localmente prima di caricare il CSS sul server web usando programmi come Compass.app o Koala. Può anche essere eseguita sul server usando uno script PHP o Ruby che compila Sass in CSS.