Diversi modi per compilare Sass

In questa lezione vedremo come usare alcune delle opzioni disponibili in node-sass per configurare la compilazione dei file con estensione .scss. Illustreremo poi un metodo alternativo per procedere alla compilazione che può risultare più vantaggioso specie se si lavora su progetti di grandi dimensioni. Vedremo infatti, almeno superficialmente, come configurare Gulp. Infine accenneremo altri metodi disponibili per compilare Sass.

Come compilare Sass in CSS via linea di comando

Abbiamo già visto come lanciare node-sass per compilare un file con estensione .scss in CSS. Illustriamo ora come utilizzare alcune delle opzioni più utili di node-sass.

Selezionare la directory in cui inserire i file CSS generati

La prima opzione, che vedremo attraverso un esempio, permette di selezionare la directory di destinazione. In questo caso basterà specificare semplicemente il percorso di tale directory attraverso l’opzione -o o –output.

Supponiamo di avere due file style_1.scss e style_2.scss all’interno di una cartella scss. Possiamo compilare tutti i file presenti in quest’ultima e chiedere che i file CSS generati vengano inseriti in una nuova cartella che chiamiamo banalmente css.

node-sass scss -o css
Rendering Complete, saving .css file...
Wrote CSS to /Users/claudio/esempio_sass/css/style_1.css
Rendering Complete, saving .css file...
Wrote CSS to /Users/claudio/esempio_sass/css/style_2.css
Wrote 2 CSS files to /Users/claudio/esempio_sass/css

Dopo aver lanciato il comando mostrato sopra, verranno generati due file con estensione .css.

tree
.
├── css
│   ├── style_1.css
│   └── style_2.css
├── index.html
└── scss
    ├── style_1.scss
    └── style_2.scss

2 directories, 5 files

L’opzione –output-style

Grazie all’opzione –output-style è possibile specificare la formattazione dei file CSS generati. I valori disponibili sono quattro: nested (valore di default), expanded, compact, compressed. In particolare quest’ultimo permette di generare dei file CSS ottimizzati e formattati in modo da ridurre al minimo la dimensione del file stesso.

node-sass scss/style_2.scss -o css --output-style compressed
Rendering Complete, saving .css file...
Wrote CSS to /Users/claudio/esempio_sass/css/style_2.css

/* file style_2.scss */
$font-size: 16px;

p {
  font-size: $font-size;
}

a {
  color: crimson;
}

/* file style_2.css */
p{font-size:16px}a{color:crimson}

Configurare l’indentazione dei file generati con le opzioni –indent-type e –indent-width

Le due opzioni –indent-type e –indent-width consentono di configurare l’indentazione dei file CSS generati. La prima opzione può assumere come unici valori tab o space mentre la seconda accetta un valore numerico positivo non superiore a 10.

Compilare i file Sass automaticamente con –watch

Una delle opzioni più interessanti è –watch grazie alla quale non è necessario lanciare il comando node-sass manualmente ogni volta che apportiamo una modifica a un file. In questo caso, quando un file viene aggiornato, node-sass effettua nuovamente il processo di compilazione in base ai parametri specificati via linea di comando.

node-sass scss -o css \
--indent-width 4 --indent-type space \
--watch

Il comando riportato sopra resta in ascolto per eventuali modifiche apportate ai file con estensione .scss presenti nella cartella scss e, ogni volta che uno di questi viene aggiornato, viene generato un file con estensione .css avente lo stesso nome. Il nuovo file userà 4 spazi per l’indentazione.

Generare le source-map

L’opzione –source-map consente di creare i file source map relativi ai file CSS generati. Come vedremo in una delle prossime lezioni si tratta di una funzionalità estremamente utile in fase di debugging, specialmente in progetti di grandi dimensioni.

Usare node-sass via NPM

Lanciare ogni volta i comandi appena visti può risultare macchinoso e noioso. Per questo motivo, in un progetto inizializzato con NPM, possiamo far uso degli script definiti nel file package.json per semplificare la compilazione. Creiamo allora una nuova cartella all’interno della quale inseriamo due sottocartelle (scss e css) e un file index.html. (In sostanza è la stessa struttura della cartella ispezionata prima con il comando tree) Supponendo di aver precedentemente installato node-sass globalmente e aver lanciato il comando npm init -y, possiamo modificare il file package.json come segue.

/* file package.json */
{
  "name": "lesson_02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "sass": "node-sass scss -o css",
    "sass:watch": "npm run sass -- --watch",
    "sass:build": "npm run sass -- --output-style compressed"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Nell’esempio mostrato sopra abbiamo aggiunto tre script al file package.json. In questo modo possiamo lanciare il primo dei tre script per compilare i file presenti nella cartella scss una volta sola. Oppure possiamo eseguire il comando node-sass chiedendo di osservare eventuali modifiche dei file e generare nuovamente i file CSS aggiornati. In quest’ultimo caso dovremo semplicemente eseguire via linea di comando npm run sass:watch. (Abbiamo preceduto –watch con ‘–‘ per indicare che si tratta di un’opzione da passare al comando node-sass)

Finora abbiamo sempre usato node-sass via linea di comando trascurando il fatto che si tratta comunque di una libreria per Node.js la quale può essere quindi usata all’interno di qualsiasi programma eseguito tramite Node.js. Per esempio, potremmo tranquillamente creare un file compile-sass.js in cui eseguiamo le opportune operazioni per generare i file CSS e aggiungere uno script al file package.json che si limita a lanciare il comando node compile-sass.js.

Compilare Sass via Gulp

Gulp è un task runner molto diffuso e apprezzato che permette di automatizzare numerose operazioni e ottimizzare il processo di sviluppo di un’applicazione web. Ovviamente possiamo eseguire la compilazione dei file .scss attraverso l’uso del plugin gulp-sass. In questa lezione non ci soffermeremo ad analizzare la sintassi e le funzioni usate, ma ci limitiamo a mostrare un semplice esempio. Chi non conoscesse Gulp e volesse saperne di più può consultare la documentazione ufficiale. Vediamo quindi un esempio elementare in cui utilizziamo Gulp per compilare Sass in CSS.

Per prima cosa installiamo Gulp globalmente via NPM.

npm i -g gulp

Creiamo quindi una nuova cartella all’interno della quale lanciamo i seguenti comandi per creare un file package.json inizialmente vuoto e installare tramite NPM gulp e gulp-sass che aggiungiamo al file package.json come devDependencies.

npm init -y
npm i gulp gulp-sass --save-dev

Dopo aver creato i file Gulpfile.js, index.html e le due sottocartelle css e scss, avremo una struttura come quella riportata sotto.

tree
.
├── Gulpfile.js
├── css
├── index.html
├── package-lock.json
├── package.json
└── scss
    ├── style_1.scss
    └── style_2.scss

2 directories, 6 files

All’interno del file Gulpfile.js inseriremo il seguente frammento di codice.

/* file Gulpfile.js */
let gulp = require('gulp');
let gulpSass = require('gulp-sass');

gulp.task('sass', function() {
    gulp.src('scss/*.scss')
        .pipe(gulpSass().on('error', gulpSass.logError))
        .pipe(gulp.dest('./css/'));
});

gulp.task('watch:sass', function () {
    gulp.watch('scss/*.scss',['sass']);
})

gulp.task('default', ['watch:sass']);

Nel file Gulpfile.js importiamo gulp e gulp-sass e definiamo tre task. Il metodo gulp.task() riceve due argomenti: il nome del task e una funzione che verrà invocata quando eseguiamo il task. Nel primo dei task da noi definiti, identificato dal nome ‘sass’, usiamo il metodo .src() per indicare quali file vogliamo compilare (ovvero tutti i file con estensione .scss presenti nella cartella scss). Usiamo quindi il metodo .pipe() per passare tali file a gulpSass() che li compilerà. Infine inseriamo i file generati all’interno della cartella css presente nella directory base. In caso si verifichi un errore durante l’esecuzione di gulpSass() verrà emesso un evento ‘error’ che intercettiamo e gestiamo con .on('error', gulpSass.logError). Possiamo eseguire questo primo task con il comando gulp sass che compilerà i file presenti nella cartella scss e terminerà la sua esecuzione. Al fine di eseguire il task appena descritto ogni volta che i file con estensione .scss vengono aggiornati, abbiamo creato un altro task che può essere lanciato con il comando gulp watch:sass. Infine abbiamo creato un task particolare (default) che verrà eseguito lanciando semplicemente il comando gulp. Prima di eseguire quest’ultimo task, verrà lanciato il task watch:sass.

Altri metodi per compilare Sass

I metodi visti finora rappresentano solo alcuni dei modi possibili per compilare Sass. Vista la sua enorme popolarità, diversi strumenti danno la possibilità di compilare dei file .scss. Così come Gulp, è possibile compilare Sass in un altro popolare task runner come Grunt grazie a grunt-sass. Anche un module bundler come Webpack supporta la compilazione dei file SCSS attraverso l’uso degli opportuni loader. In questa lezione non vedremo nessun esempio con Webpack visto che si tratta di un argomento che richiederebbe un’intera guida, dato l’enorme numero di funzionalità in esso presenti. Vi consigliamo però di consultare la documentazione ufficiale perché si tratta di uno strumento decisamente interessante. Una soluzione alternativa e più semplice di Webpack è costituita da Parcel.js. Si tratta di un module bundler veloce che non richiede particolari configurazioni. Parcel.js supporta i file con estensione .scss che possono essere importati direttamente nei file javascript. L’unico requisito per compilare i file Sass è installare node-sass tramite NPM. Al contrario di Webpack, la documentazione è sintetica e basta davvero pochissimo tempo per poter iniziare a usare Parcel.js nel vostro prossimo progetto.

Conclusioni

In questa lezione abbiamo illustrato alcuni modi per compilare i file Sass. Nella prossima lezione inizieremo a parlare di alcune delle funzionalità basilari di Sass come le variabili.