Sass è il linguaggio che più mi ha semplificato la vita da programmatore web. Per chi ancora non lo conoscesse, è un preprocessore per fogli di stile. In pratica aggiunge la possibilità di utilizzo di variabili, cicli, mixin e operazioni logiche al suo solido e staticissimo antenato CSS, donando a quest’ultimo elevate caratteristiche di manutenibilità, semplicità e pulizia del codice.
In uno dei primi articoli comparsi su questo blog, avevo spiegato come installarlo ed utilizzarlo su un PC Windows, ora invece voglio mostrare come integrarlo in uno dei più famosi, e a mio avviso fatti meglio, editor di codice per Windows: Notepad++.
Sass Syntax Highlighting
Una delle caratteristiche più importanti che deve avere un editor di codice nel suo supporto ad un linguaggio è l’evidenziazione della sintassi. Notepad++ riconosce veramente tanti linguaggi, ma come la maggior parte degli editor, non riconosce Sass. Una delle caratteristiche che lo contraddistinguono è la sua semplice estensibilità, presenta infatti un’interfaccia grafica apposita per la definizione personalizzata di linguaggi sotto le voci di menù Linguaggio -> Definito dall’utente…, maschera attraverso la quale potremo creare, modificare, importare ed esportare i nostri linguaggi preferiti.
Scaricando il file qui sotto e importandolo attraverso l’interfaccia appena descritta avrete abilitato l’evidenziazione per Sass. È necessario modificare l’estensione .txt del file in .xml una volta scaricato per utlizzarlo.
Sass language definition for Notepad++
Compilazione dei file Sass
La compilazione è un altro punto cruciale nell’utilizzo di Sass, infatti i file sono inutilizzabili così come sono: devono essere compilati per essere trasformati nei loro corrispondenti CSS. Normalmente questa operazione si effettua da linea di comando, istruendo il compilatore ad osservare la cartella che contiene i file Sass aggiornando i CSS corrispondenti ad ogni cambiamento.
Tramite il plugin jN, che implementa l’utilizzo di Javascript per espandere Notepad++, e la sua integrazione con un file disponibile per il download, potremo ovviare a questa noiosa procedura, facendo in modo che sia Notepad++ ad inviare i file Sass al compilatore e restituendoci dei file CSS.
Una volta scaricato jN e il file per la compilazione, scompattiamo l’archivio e mettiamo il contenuto della cartella plugins dentro la cartella plugins di Notepad++, poi entriamo nella cartella jN e trasferiamo qui il file per la compilazione. Tramite le variabili dichiarate all’inizio del Javascript potremo modificare il comportamento del compilatore adattandolo alle nostre esigenze. Per far funzionare il compilatore è necessario modificare l’estensione del file da .txt a .js.
All’inizio del file sono presenti quattro variabili, che permettono all’utente di personalizzare in maniera rapida il comportamento dello script:
- pathToRuby permette di specificare la cartella di installazione di Ruby sulla nostra macchina.
- debugMode permette di attivare (true) o disattivare (false) la comparsa del Prompt dei comandi a schermo ad ogni compilazione.
- outputStyle modifica l’output del file compilato. Sono possibili quattro opzioni: expanded, il file è completamente leggibile; nested, le subclassi sono indentate; compact, ogni classe viene scritta su una riga; compressed, tutto il foglio di stile viene scritto su una sola riga.
- skipUnderscoredFiles esclude (true) o meno (false) i file i cui nomi cominciano con underscore dalla compilazione.
Attenzione: affinché la compilazione dei file abbia successo, sarà necessario che Sass sia installato sulla macchina. Per installare Sass in maniera agevole sul tuo PC puoi provare a consultare la guida Sass, i preprocessori nei fogli di stile – Guida all’installazione su PC Windows.
A questo punto sarà sufficiente salvare il file con Notepad++, lo script si occuperà di generare il file compilato con estensione .css nella stessa cartella del file .sass.
Sass compiler for Notepad++
Se hai trovato utili le informazioni contenute in questo articolo e hai scaricato i file, dedica due minuti del tuo tempo a scoprire perché sia giusto sostenere Baty’s Base!