Avrai sentito più volte tutte queste sigle, vero? 
Facciamo un po' di chiarezza sul loro significato.

SASS e LESS sono dei compilatori di linguaggi.

Questo significa che sono due "strumenti per tradurre" il codice da un linguggio ad un altro. Più avanti scopriremo perchè è necessaria questa traduzione.
Se vuoi una definizione più ampia di cosa sia un compilatore, eccola qui.

Mi è parso corretto citare LESS per completezza, ma sappi che in questa guida ho scelto di parlare di SASS perché lo considero più performante e perchè anche realtà come Bootstrap sono passate da LESS a SASS per agevolare la compatibilità con alcuni altri linguaggi.

Andiamo avanti con le definizioni.

SCSS è la sintassi con cui è scritto SASS.

Per spiegare i concetti in maniera basilare, possiamo dire che noi scriveremo in SCSS, metteremo sul server il nostro file, e SASS si occuperà di tradurre questo file SCSS in CSS.

Infine:

Un file in SASS ha estensione .scss

Quindi potremo avere dei file che si chiamano, ad esempio, style.scss o tema.scss

Perché usare la sintassi SCSS? Non bastava CSS?

SCSS potenzia CSS con tantissime cose estremamente utili per noi frontend designer. 

In questa guida troverai le principali, ma andando avanti e diventano più espreto ti consiglio di leggere la documentazione ufficiale di SASS e di sbizzarrirti con la fantasia.

Ho un file in CSS e voglio passare a SCSS, come posso fare?

Prima di rispondere, ci sono da far presente due questioni:

1. Per usare SCSS non basta rinominare il tuo file da .css a .scss.

Devi infatti avere un compilatore, così come capita per PHP, Ruby o altri linguaggi. La miglior modalità di compilare SCSS dipende molto dal progetto che hai in corso. Ci occuperemo dei casi più frequenti in altri punti di questa guida.

2. Ogni file CSS è compatibile con SCSS

Come dicevmo prima, SCSS potenzia CSS. E "potenzia" non nuol dire "esclude".
Questo vuol dire che qualsiasi file CSS valido, se compilato come fosse un SCSS, è comunque letto in maniera corretta.

3. E se proprio volessi convertire un CSS in SCSS...

Ci sono moltissimi tool online per farlo. Cerca su Google "CSS to SASS", "CSS to SCSS" e così via.
C'è l'imbarazzo della scelta. :)

Che ne dici?



Rimani sempre informato sulle ultime novità!

Lavori in corso Ricevi aggiornamenti su Twitter o tramite il form. Il prossimo episodio uscirà il prossimo mese!