SASS per i CSS (2)

Ven, 2009/07/03 - 20:28 — 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:

sudo apt-get install ruby1.8 rubygems
gem sources --add http://gems.github.com/
sudo gem install chriseppstein-compass

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:

/var/lib/gems/1.8/bin/compass PROVASASS

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

PROVASASS
 |- images
 |   |- *.png
 |   |- ...
 |   `- *.jpeg
 |
 |- src
 |   |- *.sass
 |   |- ...
 |   `- *.sass
 |
 |- stylesheet
 |   |- *.css
 |   |- ...
 |   `- *.css
 |
 `-config.rb

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:

/var/lib/gems/1.8/bin/compass -f blueprint PROVASASS

ed automaticamente verranno inclusi i file necessari:

PROVASASS
 |- images
 |   `- grid.png
 |
 |- src
 |   |- home.sass
 |   |- ie.sass
 |   |- print.sass
 |   `- screen.sass
 |
 |- stylesheet
 |   |- home.css
 |   |- ie.css
 |   |- print.css
 |   `- screen.css
 |
 `-config.rb

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:

/var/lib/gems/1.8/bin/compass --watch PROVASASS

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.

Segnala questo articolo in:

Altri contenuti che potrebbero interessarti

XAMPP - Step by Step

Nello sviluppo di siti web è preferibile operare in locale e trasferire il tutto sul server remoto solo una volta che si è ottimizzata la configurazione per lo scopo che ci si è prefissi. Ciò permette di avere una maggior velocità poiché non è necessario operare sul server trasferendo i file ogni...
SASS per i CSS (1)

I CSS sono uno degli elementi che nel corso degli anni, nel settore del web, si sono meno evoluti dal pundo ti vista della struttura utilizzata. Nelle corso delle diverse versioni sono state aggiunge solo proprietà e selettori nuovi. Probabilmente penserete: Se non sono cambiati tantomeglio, evito...
Omega 3, aggiungiamo le nostre griglie

Chi avesse iniziato ad utilizzare Drupal 7 si sarà senz'altro d'accordo che stanno nascendo dei temi di partenza molto sofisticati da cui partire per la realizzazione di temi, in particolare sta emergendo sempre più Omega 3. Questi temi, però possono avere necessità di essere estesi per aggiungere...
VIews styler

Precedentemente avevo scritto una patch per views che pemetteva di andare ad indicare delle classi specifiche alle singole righe delle views. Considerato che modificare il codice di un modulo lo considero una delle cose più pericolose nonché sbagliate, e in considerazione del fatto dell'enorme...