Pubblicato il Lascia un commento

SCSS e SASS, preprocessore CSS

Preprocessore, .scss e .sass, per organizzare meglio i propi fogli di stile css.

Si tratta di scrivere un file di tipo .sass o .scss con sintassi e/o regole leggermente diverse e poi compilarlo per generare il foglio di stile .css.

Differenze:

  • SASS – rimuove necessità di parentesi graffe e punti e virgola;
  • SCSS – stessa sintassi ma possiblità di estendere le regole;

nb: bisogna scegliere fra l’ula o l’altra, non si possono usare entrambe contemporaneamente sullo stesso foglio .sass o .scss.

Compilazione

La compilazione avviene tramite Terminal.
Per PC bisogna istallare il linguaggio Ruby mentre per Mac nessun problema perché è già istallata di default.

Installazione

  1. apri il Terminal
  2. installa SASS con la seguente linea di comando:
  3. se necessario scrivere così per i privilegi aministrativi:
  4. verifica se ok restituisce “Sass 3.3.8 (Maptastic Maple)” scrivendo:

Esecuzione

  1. sempre da terminal posizionati sulla cartella dove è situato il file da compilare con il comando:

    nb: invece che scrivere a mano il percorso su Mac puoi trascinare la cartella sul terminal ;b
  2. METODO 1 – esegui compilazione di un file generando file con stesso nome ma estenzione .css
  3. METODO 2 – oppure autocompliazione:

    nb: c’è il punto in fondo.
  4. METODO 3 – oppure genera file css con nome diverso

    # miofileuno.scss compila in output.css
  5. METODO 4 – oppure separa file sorgenti e compilati su diverse cartelle:

    tutti i file con estensione .scss nella cartella ‘sass’ vengono compilati nei corrispettivi omonimi con estensione .css nella cartella ‘css’

Debug

Per fare in modo che utilizzando un Devtool (F12 sui browser) i riferimenti siano al file originale sorgente scss e non alla sua compilazione.

Il seguente comando genera automaticamente la sourcemap che i moderni browser sanno interpretare, per mettere in correlazione il file sorgente al file compilato:

 

 

 

fonte:
http://www.html.it/pag/49232/sass-introduzione-e-installazione/

vedi anche:
comandi terminal

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.