Primi passi con Sass

Primi passi#section1

Sass è scritto in Ruby e distribuito con il Ruby package manager RubyGems. Se avete familiarità con Ruby (e con il prompt dei comandi del vostro computer), potete trovare le istruzioni per installare e far girare la Sass gem sul sito web di Sass.

Per quelli che hanno meno familiarità con la command line o che semplicemente vogliono un modo facile e veloce per lavorare con Sass, c’è Scout, una app di AIR disponibile per Mac e Windows che integra Ruby e il Sass compiler.

Sia il command line tool di sass sia l’app Scout funzionano controllando i cambiamenti che fate sui fogli di stile SCSS mentre ci lavorate, compilandoli poi automaticamente in regolari CSS quando li salvate. La directory in cui risiedono i files Sass è chiamata input folder. I vostri files CSS processati sono salvati nella cartelletta output. Queste cartellette possono essere annidate una dentro l’altra: infatti, un pattern tipico consiste nell’avere la cartella di input (che io solitamente chiamo “scss” nonostante possiate chiamarla come volete) all’interno della normale cartelletta dei fogli di stile del vostro sito, così:

my_project/
  index.html
  css/
    main_style.css
    scss/
      main_style.scss 
      _mixins.scss
      _colors.scss

Nella mia cartella scss di cui sopra, i files il cui nome comincia con un underscore sono chiamati parziali (partials). Come suggerisce il nome, contengono dei fogli di stile “parziali”, pezzi di codice SCSS che verranno importati nei vostri principali files SCSS. Parlerò ancora dei parziali tra un attimo, ma adesso sapete dove stanno.

Utilizzare i parziali per organizzare il codice#section2

I CSS forniscono già la direttiva @import per collegare i fogli di stile esterni, aggiuntivi, e alcuni sviluppatori preferiscono usarla per spezzare gli stili di un grosso progetto in unità logiche più piccole. Ad esempio, il nostro file main_style.css potrebbe non contenere alcunché al di là della dichiarazione @import che collega un insieme di fogli di stile specifici per una pagina:

@import url('/shared/global.css');
@import url('/pages/home.css');
@import url('/pages/blog.css');

Tuttavia, questa non è considerata la pratica migliore, perché ciascuna di queste import è un file in più che deve essere richiesto e caricato dal browser, che può rendere più lento il tempo di caricamento del vostro sito e sicuramente abbasserà i vostri punteggi YSlow e Google Page Speed.

Sass viene in vostro aiuto permettendovi di spezzare dei grossi fogli di stile in parziali. Farete ancora riferimento a loro utilizzando la direttiva @import (in una nuova forma più breve) e quando i vostri files SCSS saranno processati, il contenuto del parziale sarà inserito direttamente nell’output CSS. (Importare un URL funziona allo stesso modo dei normali CSS).

@import 'shared/global';
@import 'pages/home';
@import 'pages/blog';

Il risultato è un file che contiene tutti i vostri stili. Sass può anche miniaturizzare automaticamente il suo output CSS, togliendo tutti gli spazi bianchi non necessari o tutti gli a-capo per ottimizzare i tempi di caricamento.

C’è una trappola. I parziali sono un tipo speciale di file SCSS, non pensati per essere usati come fogli di stile regolari. Tutto il codice che mettete in uno deve essere @import-ato nello stylesheet per essere utilizzato. I nomi dei files parziali deve cominciare con un underscore, ad esempio il parziale pages/home caricato sopra dovrebbe in realtà essere chiamato pages/_home.scss. (Questi percorsi sono sempre relativi al file attuale). L’underscore è il modo in cui il compilatore Sass sa che un file è un parziale e pertanto non deve essere compilato in un foglio di stile CSS effettivo. Tuttavia, dato che lo scopo di un parziale è quello di organizzare il codice in unità logiche, sembra un compromesso accettabile.

Non ripetetevi#section3

Adesso che i vostri fogli di stile sono organizzati meglio, proviamo a renderli meno ripetitivi.

Una delle caratteristiche più graziose di Sass sono le regole annidate (nested rules). In un normale file CSS, le regole devono essere elencate in ordine sequenziale e ogni selettore delle regole deve includere tutti i suoi elementi:

body.home .media-unit {
  border: 1px solid #ccc;
  background-color: #fff;
}
body.home  .media-unit .right {
  border-left: 1px solid #ccc;
}
body.home .media-unit .right h1 {
  font-size: 24px;
}

Oltre ad essere molto, molto ripetitivo, questo codice non fa nulla per aiutarci a capire come gli elementi HTML a cui stiamo assegnando gli stili sono in relazione uno con l’altro. Con l’annidamento, possiamo scrivere del codice SCSS che è sia meno ridondante sia più semplice da seguire:

body.home {
  .media-unit {
    border: 1px solid #ccc;
    background-color: #fff;
    .right {
      border-left: 1px solid #ccc;
      h1 {
        font-size: 24px;
      }
    }
  }
}

Dopo aver processato questo risultato nello stesso CSS come sopra. Sfortunatamente, la sintassi più corta non renderà più piccoli o più veloci da caricare i vostri files CSS. Ma l’annidamento vi aiuterà a dare una struttura logica, ad avere codice pulito e ben organizzato, il che dovrebbe anche renderne più semplice la gestione nel tempo.

Un altro bel trucco di annidamento: Sass vi permette di annidare le media query all’interno di altre regole, rendendo semplice vedere quali stili sono applicati ad un dato oggetto nella vostra pagina:

.container {
  width: 940px;

  // If the device is narrower than 940px, switch to 
  // a fluid layout
  @media screen and (max-width:940px) {
    width: auto;
  }
}

Quando processate questo file, Sass sa come convertirlo in un valido CSS, copiando il selettore .container all’interno della media query in questo modo:

.container {
  width: 940px;
}

@media screen and (max-width:940px) {
  .container {
    width: auto;
  }
}

Variabili#section4

Le variabili di Sass sono grandi per due ragioni. In primo luogo, e cosa più importante, rendono il codice più semplice da modificare riducendo le duplicazioni. Ma vi permettono anche di assegnare dei nomi a speciali valori di proprietà come i colori, che vi aiutano a capire l’intento che sta dietro un dato stile.

In Typekit un certo numero di elementi nella nostra UI usa il nostro personale colore verde, #99cc00, o “verde Typekit” per brevità. Questo colore appare centinaia di volte nel nostro CSS, utilizzato su qualsiasi cosa, dai bottoni ai titoli, tanto che se dovessimo mai cambiare i colori del nostro brand per scegliere qualcosa diverso dal verde Typekit ci vorrebbe molto lavoro per cambiarne ogni istanza. Utilizzando le variabili invece del semplice codice esadecimale, è facile cambiare solamente la variabile (che potete definire in cima al vostro foglio di stile, o anche in un parziale) ed il nuovo colore apparirà ovunque, istantaneamente. Potete anche assegnare delle variabili a altre variabili, che vi aiuteranno a mantenere semantico il vostro foglio di stile:

$typekit-green: "#99cc00";
$typekit-link-color: $typekit-green;

a {
  color: $typekit-link-color;
}

Potete assegnare quasi tutti i tipi di valore ad una variabile; oltre che per i valori esadecimali di un colore sono particolarmente utili per le famiglie di font specificate in font-family:

$sans-serif-font: 'ff-dagny-web-pro', 'Helvetica Neue', Arial,  
Helvetica, 'Liberation Sans', sans-serif;
$serif-font: 'ff-tisa-web-pro', Georgia, Times, serif;

.banner h1 {
  font-family: $sans-serif-font;
}

Mixins#section5

I mixins sono degli insiemi riutilizzabili di proprietà o regole che includono o si “mischiano” con altre regole. Vengono definiti utilizzando la keyword @mixin e vengono inclusi utilizzando la keyword @include.

In questo esempio, sto dicendo a Sass di applicare tutte le proprietà di stile contenute nel mixin highlighted-bold-text a tutti gli elementi span all’interno di .result-with-highlights:

$highlight-color: #ffa;

@mixin highlighted-bold-text {
  font-weight: bold;
  background-color: $highlight-color;
}

.result-with-highlights {
  span {
    @include highlighted-bold-text;
  }
}

Una volta che avrete definito un mixin, potrete riutilizzarlo ovunque nello stesso file. Qui dico che gli elementi con una class highlighted dovrebbero anche avere le proprietà color e font-weight specificate dal mixin:

.highlighted {
  @include highlighted-bold-text;
}

Questo è molto utile per applicare le nuove proprietà CSS3 agli elementi, mentre assicurate una grande compatibilità cross-browser attraverso i vendor prefix e gli stack di fallback. Nei CSS regolari, i vendor fallbacks sono noiosi da usare a causa della loro verbosità, che ci porta a molto copy-paste noioso. I mixins di Sass ci permettono di usare nuovi tipi di stili in maniere sicura senza scrivere molto codice.

Qui ho definito un mixin che applica un angolo arrotondato di 4px ad un elemento, utilizzando le proprietà con vendor prefix di WebKit, Firefox e IE, seguite dalla proprietà standard border-radius della specifica CSS3. Ho anche definito l’angolo di curvatura come una variabile, così che sia più semplice da cambiare in futuro:

@mixin rounded-corners {
  $rounded-corner-radius: 4px;
  -webkit-border-radius: $rounded-corner-radius;
  -moz-border-radius: $rounded-corner-radius;
  -ms-border-radius: $rounded-corner-radius;
  border-radius: $rounded-corner-radius;
}

.button {
  @include rounded-corners;
}

I mixins possono anche contenere delle intere regole annidate, non solo delle proprietà. Ecco una versione del familiare hack CSS clearfix implementata in un mixin Sass:

@mixin clearfix {
 // For modern browsers
  &:before,
  &:after {
    content:"";
    display:table;
  }

  &:after {
    clear:both;
  }

  // For IE 6/7 (trigger hasLayout)
  & {
    zoom:1;
  }
}

.group {
  @include clearfix;
}

Il selettore amperstand (&) è una convenzione Sass che significa “questo elemento”. Quando questo codice viene compilato, Sass sostituisce tutti i simboli & con il selettore attuale, in questo caso .group.

Rendere i fogli di stile più intelligenti#section6

Usare i mixins per applicare dei semplici stili è fico, ma quello che rende stupendi i mixin è che possono prendere degli argomenti, proprio come una funzione in JavaScript o in PHP. Inoltre, potete usarli insieme ad altre più avanzate caratteristiche, come le espressioni e le funzioni per spingersi più lontano con l’organizzazione, per implementare dei grandi e complessi fogli di stile.

I sistemi di layout a griglia sono una buona applicazione degli script Sass. Ci sono molti grid system CSS da 960px pronti all’uso, ma la maggior parte di questi richiedono l’aggiunta al vostro codice di nomi di classi non semantici. Per non parlare del fatto che per usare una di queste griglie dovete caricare tutto il CSS per l’intero sistema, anche se pianificate di usare solo poche unità standard di dimensione.

Per il nostro esempio finale, implementeremo una semplice griglia da 12 unità in Sass. Piuttosto che definire i class name per ciascuna unità della griglia, creeremo un mixin che applicherà la width ed i margin corretti per far diventare un elemento un’unità della nostra griglia.

Per prima cosa, dobbiamo impostare le variabili con la larghezza di column e gutter:

$column-width: 60px;    // 12 columns = 720px
$gutter-width: 20px;    // 11 gutters = 220px

Poi, faremo fare dei conti a Sass al posto nostro. Un’unità della nostra griglia si espanderà per un certo numero di colonne più tutti i gutter tra queste colonne. Per calcolare la width, dobbiamo usare la formula seguente:

width = (column width × span) + (gutter width × (span – 1))

Adesso possiamo scrivere il nostro mixin. A differenza degli esempi di cui sopra, questo mixin prenderà un argomento, lo span, che verrà passato al nostro mixin come una variabile. Ciascuna unità della griglia avrà un float left e per mantenere lo spazio di 20px tra le colonne, ciascuna unità avrà un margin-right pari alla larghezza del gutter:

@mixin grid-unit($span) {
  float: left;
  margin-right: $gutter-width;
  width: ($column-width * $span) + ($gutter-width * ($span - 1));
}

Semplice, no? Ma c’è molto potere in quelle poche linee di codice. Possiamo implementare un layout base di due-terzi con un’area per il contenuto principale e una sidebar molto semplicemente, utilizzando delle altre classi con nomi semantici e i mixin di Sass:

.container {
  @include clearfix;
  @include grid-unit(12);
  float: none;
  margin: 0 auto;
}

.main-content {
  @include grid-unit(8);
}

.sidebar {
  @include grid-unit(4);
  margin-right: 0;
}

Per quanto questo possa avere valore, e io stesso uso alcune versioni di questo grid calculator mixin in ogni progetto su cui lavoro attualmente, stiamo solo cominciando a grattare la superficie di quello che è possibile con Sass.

Sass supporta delle espressioni matematiche di base per aiutarci a rendere più semplice modellare i layout adaptive con larghezza fluida. Qui uso la formula per la responsive width di Ethan Marcotte per creare una versione più responsive della mia griglia base di cui sopra. Sass non fa conversioni tra le unità CSS a meno che non gli venga chiesto esplicitamente, così ho messo tutte le mie formule nella funzione percentage() built-in in Sass:

.container {
// result = target / context
  width: percentage(940px / 960px);

  .main-content {
    // This is nested inside of .container, so its context is 940px
    width: percentage(620px / 940px);
  }

  .sidebar {
    width: percentage(300px / 940px);
  }
}

Ci sono anche funzioni per trasformare ed aggiustare i colori: potete rendere i colori più chiari o più scuri, o aggiustare la saturazione o la trasparenza alpha, proprio all’interno del vostro foglio di stile:

$base-link-color: #00f;
a {
  color: $base-link-color;
}
a:visited {
  // This reduces the lightness of the color (in HSL terms) 
  // by 50%, leaving hue and saturation alone
  color: darken($base-link-color, 20%);
}

figcaption {
  // Generates an rgba() color value with 50% opacity
  background-color: transparentize(#fff, 50%);
}

Inoltre, se queste funzioni non fossero abbastanza, potete definire le vostre, condividerle e riusarle tra più progetti come semplici parziali. Guardate la lista completa delle funzioni built-in in SassScript per un assaggio di quello che è possibile.

E poi?#section7

Il sito ufficiale di Sass è pieno di informazioni utili, inclusa una reference guide completa per l’uso del linguaggio SCSS. Una cosa che potreste trovare utile fin dall’inizio è questa lista dei plugin disponibili per text editor SCSS, che forniscono la syntax highlighting e altri tool utili per scrivere il codice Sass nell’editor che preferite.

Inoltre, il creatore di Sass Hampton Catlin sta attualmente finendo una guida approfondita a Sass per Pragmatic Programmers, che potete acquistare e leggere oggi attraverso il programma di Pragmatic Beta Books.

Oltre al linguaggio Sass core, c’è anche Compass, una libreria di funzioni e pattern SCSS sviluppati da Chris Eppstein, con il supporto integrato del CSS reset di Eric Meyer, il Blueprint grid system oltre a tonnellate di CSS3 ed effetti tipografici. I suoi autori l’hanno definito il “jQuery degli stylesheet”… Una descrizione piuttosto adatta! Se state usando la app Scout, avete già installato il framework Compass. Altrimenti, potete trovare le istruzioni per installarlo ed usarlo sul sito Compass.

Illustrazioni: {carlok}