Integrare SASS in NetBeans

In questo post vedremo come installare SASS in ambiente Ruby per Windows, per poi integrarlo con l’IDE NetBeans.

Installare Ruby e SASS (in ambiente Windows)

Sul sito rubyinstaller.org è possibile scaricare la versione più aggiornata di Ruby per Windows a 32 e a 64 bit (la 2.2.2 ad agosto 2015). Eseguire l’installazione, avendo l’unica accortezza di evitare path contenenti spazi (fig. 1).

fig.1 - Pannello di opzioni visualizzato dall'installazione di Ruby
fig.1 – Pannello di opzioni visualizzato dall’installazione di Ruby

Al termine dell’installazione, l’elenco dei programmi comprenderà il prompt dei comandi con Ruby (fig. 2).

fig.2 - Link al prompt dei comandi con Ruby
fig.2 – Link al prompt dei comandi con Ruby

Lanciare il prompt dei comandi con Ruby, quindi digitare il comando per il download e l’installazione di SASS (fig. 3):

gem install sass
fig.3 – Comando di installazione di SASS in ambiente Ruby.

Per verificare l’esito della installazione digitare il comando:

sass -v

(ovvero: visualizza la versione di SASS installata). Si otterrà una stringa di testo simile alla seguente (fig. 4):

Sass 3.4.17 (Selective Steve)
fig.4 - Comando di visualizzazione della versione SASS installata.
fig.4 – Comando di visualizzazione della versione SASS installata.

A questo punto SASS è disponibile sul computer ed è possibile eseguire la compilazione da riga di comando.

Integrare SASS in NetBeans

Anche l’integrazione di SASS in NetBeans risulta molto semplice. Seguire i passi elencati di seguito, facendo riferimento alle figure associate:

  1. Aprire NetBeans, aprire un progetto e selezionare la voce di menu: File > Project Properties (<nomeProgetto>)
  2. Selezionare la categoria “CSS Preprocessor” (fig. 5)
  3. Cliccare sul bottone “Configure Executables…” in alto a destra (sempre fig. 5)
  4. Nel campo “Sass path” inserire il percorso completo del file “sass.bat”, che è collocato nella sottocartella “bin” del path specificato in fase di installazione di Ruby (fig. 1). Vedere fig. 6 in merito alla compilazione del campo “Sass path”.
  5. Uscire cliccando sui bottoni “OK” e “OK”.
fig.5 - Proprietà progetto in NetBeans
fig.5 – Proprietà progetto in NetBeans
fig.6 - Opzioni per i CSS preprocessor in NetBeans
fig.6 – Opzioni per i CSS preprocessor in NetBeans

A questo punto è possibile compilare i file .scss in NetBeans.

Se si mantiene l’opzione “Compile Sass File on Save” (vedere fig.5) i file .css verranno rigenerati ad ogni salvataggio dei corrispondenti file .scss.

Di default è previsto che i file .scss siano inseriti nella cartella scss nella root del progetto e i file .css compilati nella cartella css, sempre nella root del progetto. Se si utilizzano cartelle diverse, indicarle nelle opzioni del preprocessore (fig. 5).