Come integrare Sass in Sublime Text su Windows

image

LESS o Sass? La scelta è ardua, in web le opinioni sono contrastanti e, sostanzialmente, anche se le differenze ci sono, questa dualità sembra più che altro una forte guerra di religione, in stile Torvalds-Tanenbaum sui kernel dei sistemi operativi. Ma se abbiamo già pubblicato una guida sul come installare LESS su Windows, con tanto di integrazione con Sublime Text 2, che ne è di Sass? Ecco quindi come installare Sass su Windows ed integrarlo su Sublime Text 2:

1. Installare Ruby scaricando l’installer da qui (mi raccomando, selezionare l’opzione che aggiunge ruby ai “PATH” di Windows, oppure aggiungerli manualmente);
2. Aprire una cartella qualunque, cliccare sulla barre degli indirizzi in alto e digitare il percorso “C:\Windows\System32“;
3. Trovare il file “cmd.exe“, cliccare su di esso con il tasto destro e scegliere “Esegui come amministratore” dal menù contestuale;
4. Localizzarsi con il comando “cd” sulla cartella “bin” contenuta all’interno della directory madre di Ruby (solitamente, il percorso è simile a “C:\Ruby193\bin“);
5. Digitare il comando “gem install sass” per installare Sass;
6. Digitare il comando “gem install compass” per installare Compass;

7. Scaricare ed installare il “Sublime Package Control” per Sublime Text (leggere questa pagina);
8. Scaricare la sintassi per Sass (CTRL+Shift+P, scrivere “install”, premere invio da tastiera, digitare scss e installare il plugin per la sintassi);

9. Creare all’interno della cartella “User” di Sublime Text (il percorso è simile a “C:\Program Files (x86)\Sublime Text 2\Data\Packages\User”) una nuova cartella con nome “Sass” (o qualcosa di simile);

10. Scaricare i file per il “Build System” di Sublime Text da qui e copiare i file “Sass.sublime-build” e “Sass Minify.sublime-build” all’interno della cartella appena creata al passaggio #7;

11. Riavviare Sublime Text;

Finito! Adesso avremo due sistemi per compilare i file “*.scss“: con il sistema “Sass” il css prodotto avrà una forma estesa e leggibile, mentre con il “Sass Minify” il css sarà compresso per bene. Entrambi li troviamo in “Tools” -> “Build Systems.