SASS e SCSS con Rails 3

Tutti conoscono i file CSS, sono i file che contengono la rappresentazione grafica degli elementi HTML, e con HTML5 / CSS3 si arricchiscono ulteriormente di funzionalità e interattività.

Purtroppo oltre a questa "evoluzione visiva" non c'é stata alcuna evoluzione sintattica, tanto per fare un esempio in CSS3 non è ancora possibile chiamare un colore per nome e poterlo riutilizzare più volte (aka variabile), ma bisogna ancora riscriverlo ogni volta col proprio valore esadecimale.

HAML, SASS e SCSS

A differenza di framework come 960.gs e altri, che propongono delle Best Practices per usare al meglio i CSS, ma aggiungono anche overhead, HAML e SASS sono delle astrazioni che ne semplificano l'utilizzo (al prezzo di imparare un nuovo linguaggio e doverlo compilare lato server).

HAML semplifica l'HTML rendendolo più leggibile e SASS/SCSS funziona in modo analogo per quanto riguarda i CSS oltre ad aggiungere delle funzionalità sostanziali.
Personalmente non mi sembra che usare HAML porti a così tanti benefici rispetto usare l' HTML "nativo", se non altro il fatto dare significato allo spazio " " offre sicuramente più compattezza e leggibilità, ma rende anche molto più difficili i copia-incolla. Diverso è invece il discorso per SASS, in quanto i CSS crescendo possono davvero diventare ingestibili e SASS offre effettivamente delle migliorie.

Vediamo quindi principali vantaggi di usare SASS o SCSS al posto del CSS. SCSS sta per Sass-y CSS, quindi in questo caso si ha una sintassi più simile al CSS (superset), ma le funzionalità sono le stesse.

• Variabili. Ovvero la possibilità di avere nel CSS delle palette di colori, misure e altri parametri personalizzate. $mio-colore: #esadecimale
• Mixins / funzioni. Cioé dei costrutti che possono servire più volte nei CSS. Esempio hack per i browser e layout con parametri. @include mixin
• Ereditarietà dei selettori. La possibilità di creare nuove classi CSS partendo da una già esistente. @extend <classe>
• Annidamento. La possibilità di richiamare elementi e proprietà senza dover ripetere in nome dell'elemento padre. Implicito per i tag, con "&" per le proprietà

Per vedere queste funzionalità in azione singolarmente andate sul tutorial ufficiale, se invece avete già dimestichezza con la programmazione potete vedere subito questo esempio di SCSS omnicomprensivo che genera 3 pulsanti come quelli in alto (demo e output css).

/* test.scss - colors + mixins + main */
$blue-cool: #0E60ED; $pink-cool: #E810E1; $red-trendy: #FF0059;
/* default colors */
$base-color: #f32; $text-color: yellow; $extra-color: #a33;
@mixin christmas_theme {

$base-color: $red-trendy; $text-color: white; $extra-color: $pink-cool;  }
@mixin rounded($amount) {

-moz-border-radius: $amount;

-webkit-border-radius: $amount;

border-radius: $amount; }
@mixin cool-gradient($color) {

background: -webkit-gradient( linear, left bottom, left top, color-stop(0.08, $color), color-stop(0.54, lighten($color, 30%)) );

background: -moz-linear-gradient( center bottom, $color 8%, lighten($color, 30%) 54% ); }
@mixin cool-button($base-color: $blue-cool){

&:hover { @include cool-gradient(lighten($base-color, 10%)); }

color: $base-color;

text-decoration: none;

padding: 2px;

border: 1px solid $base-color;

font-family: 'Yanone Kaffeesatz', arial, serif;

text-shadow: 1px 1px 1px #fff;

@include rounded(3px);

@include cool-gradient($base-color); }
.button{

@include cool-button(); }
.grigio_button {

@include cool-button(gray); }
.special_button {

@extend .button;

@include christmas_theme;

color: $text-color;

border-color: $extra-color;

text-shadow: 1px 1px 1px $extra-color;

@include cool-gradient($base-color);

&:hover { @include cool-gradient(lighten($extra-color, 10%)); } }

.grigio_button ha gli elementi di .button ricopiati, invece .special_button ridefinisce solo gli elementi necessari e include una palette di colori esterna.

L'elemento &:hover si riferisce all'elemento padre, quindi in questo caso equivale ad a:hover, mentre la differenza tra include ed extend è che nel primo caso il codice di output viene copiato, mentre nel secondo il nuovo elemento ha solo "le differenze" rispetto l'elemento padre.

I mixin lighten e darken schiariscono o inscuriscono il colore corrente di una certa percentuale. Comodissimi.

Installazione di SASS su Rails 3

Aggiornate Rubygems per sicurezza "sudo gem1.8 update --system", quindi procedete alle modifiche nel progetto.

# Gemfile
# ...
gem 'sass'

e

# config.ru
require 'sass/plugin/rack'
use Sass::Plugin::Rack
run ExampleApp::Application

A questo punto "bundle install" e SASS funzionerà in modo trasparente.

/stylesheets/sass conterrà i vostri sorgenti SASS o SCSS
/stylesheets/ conterrà i corrispettivi CSS compilati o ricompilati in automatico nel caso abbiate fatto delle modifiche

Il funzionamento è totalmente trasparente lato client e la compilazione manuale tramite il comando "sass miofile.scss" serve solo a chi non può usare sass lato server.

Per concludere vi segnalo anche sass-recipes su Github dove ci sono già altri moduli SASS strutturati. Buona semplificazione e buon riuso dei CSS.