mavimo

Come indicato nell'articolo precedente abbiamo visto la comodità di usare un metalinguaggio per i CSS come SASS. Ovviamente i browser non sono in grado di utilizzare direttamente questi file, ma necessitano di ricevere del codice CSS standard.

Questa operazione (NdA:la conversione da SASS a CSS) viene effettuata compilando i file SASS in modo da ottenre i CSS. Il fatto di dover compilare per ottenre dei CSS non deve affatto spaventarci, è un operazione che viene compiuta in automatico in maniera del tutto trasparente a chi scrive i file.

Vediamo ora come installare il tutto e automatizzare questo processo.

Ci sono diversi compilatori per SASS, scritti in diversi linguaggi, da Python, a C#, a PHP, ma quello che questo caso conviene usare è ruby, in particolare utilizzeremo compass.

Il vantaggio di usare questo strumento è l'estrema semplicità di installazione e configurazione, inoltre integra i principali framework CSS per la creazione di layout grid (blueprint, 960, YUI, ....).

Il processo di installazione, testato su ubuntu 9.04, è automatico e richiede pochissimi passaggi:

A questo punto non dobbiamo fare altro che creare un nuovo progetto. Un progetto non è altro che una cartella con una serie di file e informazioni di configurazione. Per fare questo basta andare nella cartella in cui si vuole creare progetto e dare il comando:

a questo punto ci troveremo davanti ad una cartella con la seguente struttura:

A questo punto potremmo creare e modificare tutti i file SASS che vogliamo nella directory src e procedendo coon la compialzione questi verranno trasformati nei corrispettivi CSS.

Nel caso volessimo utilizzare un framwork css grid possiamo all'interno del nostro progetto, usando per esempio blueprint, dare il comando:

ed automaticamente verranno inclusi i file necessari:

All'interno del progetto troviamo un file, il config.rb che indica i parametri per configurare ulteriormente il nostro compilatore indicando le cartelle da utilizzare, o i parametri di compilazione; è sufficiente editare il questo file, dove si trovano i diversi parametri, per gestire come verranno compilati i files:

project_type

Il tipo di progetto realizzato.

css_dir

Il nome della cartella in cui verranno inseriti i CSS dopo la compilazione.

sass_dir

La cartella contenente i SASS da compilare

images_dir

La cartella dove si trovano i file immagine indicati all'interno dei file SASS

output_style

Il tipo di output che si vuole avere nel file CSS. In maniera predefinita è impostato su :compress che indica che i CSS verranno compressi, oppure è possibile andare a renderli espansi, rendendo più semplice la lettura. in ogni caso consiglio di generare i CSS compressi per la messa in produzione.

http_images_path

Il percorso in cui si trovano le immagini una volta messo in produzione i CSS.

Per rendere automatica la ricompliazione dei file lanciamo il comando:

In questo modo ad ogni modifica dei file *.sass verranno automaticamente ricompilati e otterremmo i CSS finali, pronti da essere inclusi o, se sono direttamente inclusi nelle pagine, utilizzati.