{"id":220,"date":"2011-12-13T12:04:14","date_gmt":"2011-12-13T11:04:14","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/primi-passi-con-sass\/"},"modified":"2011-12-13T12:04:14","modified_gmt":"2011-12-13T11:04:14","slug":"primi-passi-con-sass","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/primi-passi-con-sass\/","title":{"rendered":"Primi passi con Sass"},"content":{"rendered":"

La semplicit\u00e0 di CSS<\/span> \u00e8 sempre stata una delle sue caratteristiche peculiari e tra le pi\u00f9 gradite. I fogli di stile CSS<\/span> sono una semplice lista di regole, ciascuna delle quali consiste di un selettore e di alcune regole da applicare. Tuttavia, man mano che i nostri siti e le nostre applicazioni diventano pi\u00f9 complessi e hanno come obiettivo un range sempre pi\u00f9 ampio di dispositivi e dimensioni di schermo, questa semplicit\u00e0, cos\u00ec gradita quando avevamo cominciato ad allontanarci dai tag font<\/code> e dai layout a tabelle, \u00e8 diventata un vincolo.<\/p>\n

Sebbene alcuni abbiano inviato delle proposte su come sistemare i CSS<\/span>, ad esempio, aggiungendo le costanti o le variabili, nessuna di queste \u00e8 mai stata implementata da alcun produttore di browser. Inoltre, anche se un browser implementasse una nuova, migliore ed estesa forma di CSS<\/span>, ci vorrebbero anni prima che la nuova sintassi venisse supportata sufficientemente bene in tutti<\/em> i browser, perch\u00e9 abbia senso usarla.<\/p>\n

Fortunatamente, qualche anno fa, gli sviluppatori Hampton Catlin<\/a> e Nathan Weizenbaum<\/a> proposero un modo migliore per gestire un foglio di stile complesso. Sebbene i browser non siano pronti per un nuovo CSS<\/span>, Catlin e Weizenbaum hanno realizzato di poter andare avanti e progettare una nuova sintassi per i fogli di stile con caratteristiche che aiutassero a rendere i loro sempre pi\u00f9 complessi CSS<\/span> pi\u00f9 facili da scrivere e gestire, per poi usare un preprocessore<\/em> (un programma che gira sul vostro computer o server) per tradurre la nuova intelligente sintassi nei vecchi ottusi CSS<\/span> che i browser sono in grado di capire.<\/p>\n

La nuova sintassi dei fogli di stile che hanno sviluppato si chiama Sass<\/a>, che sta per \u201csyntactically awesome style sheet\u201d. La versione originale di Sass era molto diversa dai normali CSS<\/span>: non c’erano parentesi graffe e le propriet\u00e0 dovevano essere indentate con uno specifico numero di spazi, altrimenti il compilatore avrebbe dato errore. I programmatori (che sono abituati a imparare nuove sintassi e a cui piace soffrire) non ne furono molto disturbati, ma per i normali web designer era sufficientemente diversa dai CSS<\/span> che conoscevano che la maggior parte ne stette alla larga. C’era anche una questione pratica: dal momento che la sintassi pensata per Sass non era compatibile con i normali CSS<\/span>, era difficile per le persone con grossi siti web gi\u00e0 esistenti cominciare a trarre vantaggio da questa senza passare del tempo a convertire il loro vecchio codice in Sass.<\/p>\n

Quindi in Sass 3.0 gli sviluppatori hanno introdotto una nuova sintassi, pi\u00f9 simile a quella di CSS<\/span>, chiamata SCSS<\/span> (o \u201cSassy CSS<\/span>\u201d). SCSS<\/span> \u00e8 quello che i nerd chiamano \u201cstrict superset\u201d o \u201cmetalinguaggio\u201d del CSS<\/span> normale, il che vuol dire qualsisasi cosa che \u00e8 un CSS<\/span> valido \u00e8 anche un SCSS<\/span> valido. In altre parole, tutti i vostri fogli di stile dovrebbero funzionare con il processore Sass senza problemi, permettendovi di sperimentare un po’ con Sass senza dover imparare tutte le sfumature del nuovo linguaggio.<\/p>\n

A differenza dei normali CSS<\/span>, il SCSS<\/span> di Sass \u00e8 un vero linguaggio di scripting, con espressioni, funzioni, variabili, logica condizionale e loop. Non \u00e8 necessario usare tutte queste caratteristiche per trarre dei vantaggi da Sass, ma ci sono se ne avrete bisogno e in grandi progetti possono rendere un CSS<\/span> complesso o ripetitivo molto pi\u00f9 semplice da scrivere.<\/p>\n

In questo articolo vi mostrer\u00f2 alcune mosse base, per darvi un’idea di quello che \u00e8 possibile fare con Sass e SCSS<\/span> nella vostra cassetta degli attrezzi. Infine, vi consiglier\u00f2 alcuni libri e link che potrete consultare quando sarete pronti per esplorare un po’ di pi\u00f9.<\/p>\n

Per mantenere le cose quanto pi\u00f9 chiare e semplici possibili, la maggior parte dei miei esempi qui sotto si concentreranno solo sul codice SCSS<\/span>, non sull’output CSS<\/span> compilato. Il modo miglior per capire come funziona Sass \u00e8 quello di provarlo voi stessi, scrivendo alcuni stili SCSS<\/span> e vendendo cosa salta fuori. Detto questo, tutti i sorgenti dei miei esempi sono disponibili su GitHub<\/a> a cui potete far riferimento, insieme ai loro output CSS<\/span> compilati, cos\u00ec potete vedere come tutte queste brillanti nuove caratteristiche si traducono in fogli di stile utilizzabili.<\/p>\n

\n

Primi passi<\/h2>\n

Sass \u00e8 scritto in Ruby<\/a> e distribuito con il Ruby package manager RubyGems<\/a>. Se avete familiarit\u00e0 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<\/a>.<\/p>\n

Per quelli che hanno meno familiarit\u00e0 con la command line o che semplicemente vogliono un modo facile e veloce per lavorare con Sass, c’\u00e8 Scout<\/a>, una app di AIR<\/span> disponibile per Mac e Windows che integra Ruby e il Sass compiler.<\/p>\n

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

my_project\/
  index.html
  css\/
    main_style.css
    scss\/
      main_style.scss 
      _mixins.scss
      _colors.scss
<\/code><\/pre>\n
Nella mia cartella scss<\/code> di cui sopra, i files il cui nome comincia con un underscore sono chiamati parziali (partials)<\/em>. Come suggerisce il nome, contengono dei fogli di stile \u201cparziali\u201d, pezzi di codice SCSS<\/span> che verranno importati nei vostri principali files SCSS<\/span>. Parler\u00f2 ancora dei parziali tra un attimo, ma adesso sapete dove stanno.<\/p>\n
Utilizzare i parziali per organizzare il codice<\/h3>\n
I CSS<\/span> forniscono gi\u00e0 la direttiva @import<\/code> per collegare i fogli di stile esterni, aggiuntivi, e alcuni sviluppatori preferiscono usarla per spezzare gli stili di un grosso progetto in unit\u00e0 logiche pi\u00f9 piccole. Ad esempio, il nostro file main_style.css<\/code> potrebbe non contenere alcunch\u00e9 al di l\u00e0 della dichiarazione @import<\/code> che collega un insieme di fogli di stile specifici per una pagina:<\/p>\n
@import url('\/shared\/global.css');
@import url('\/pages\/home.css');
@import url('\/pages\/blog.css');
<\/code><\/pre>\n
Tuttavia, questa non \u00e8 considerata la pratica migliore, perch\u00e9 ciascuna di queste import \u00e8 un file in pi\u00f9 che deve essere richiesto e caricato dal browser, che pu\u00f2 rendere pi\u00f9 lento il tempo di caricamento del vostro sito e sicuramente abbasser\u00e0 i vostri punteggi YSlow e Google Page Speed.<\/p>\n
Sass viene in vostro aiuto permettendovi di spezzare dei grossi fogli di stile in parziali<\/em>. Farete ancora riferimento a loro utilizzando la direttiva @import<\/code> (in una nuova forma pi\u00f9 breve) e quando i vostri files SCSS<\/span> saranno processati, il contenuto del parziale sar\u00e0 inserito direttamente nell’output CSS<\/span>. (Importare un URL<\/span> funziona allo stesso modo dei normali CSS<\/span>).<\/p>\n
@import 'shared\/global';
@import 'pages\/home';
@import 'pages\/blog';
<\/code><\/pre>\n
Il risultato \u00e8 un file che contiene tutti i vostri stili. Sass pu\u00f2 anche miniaturizzare automaticamente il suo output CSS<\/span>, togliendo tutti gli spazi bianchi non necessari o tutti gli a-capo per ottimizzare i tempi di caricamento.<\/p>\n
C’\u00e8 una trappola. I parziali sono un tipo speciale di file SCSS<\/span>, non pensati per essere usati come fogli di stile regolari. Tutto il codice che mettete in uno deve<\/em> essere @import<\/code>-ato nello stylesheet per essere utilizzato. I nomi dei files parziali deve cominciare con un underscore, ad esempio il parziale pages\/home<\/code> caricato sopra dovrebbe in realt\u00e0 essere chiamato pages\/_home.scss<\/code>. (Questi percorsi sono sempre relativi al file attuale). L’underscore \u00e8 il modo in cui il compilatore Sass sa che un file \u00e8 un parziale e pertanto non deve essere compilato in un foglio di stile CSS<\/span> effettivo. Tuttavia, dato che lo scopo di un parziale \u00e8 quello di organizzare il codice in unit\u00e0 logiche, sembra un compromesso accettabile.<\/p>\n<\/div>\n
\n
Non ripetetevi<\/h2>\n
Adesso che i vostri fogli di stile sono organizzati meglio, proviamo a renderli meno ripetitivi.<\/p>\n
Una delle caratteristiche pi\u00f9 graziose di Sass sono le regole annidate (nested rules)<\/em>. In un normale file CSS<\/span>, le regole devono essere elencate in ordine sequenziale e ogni selettore delle regole deve includere tutti i suoi elementi:<\/p>\n
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;
}
<\/code><\/pre>\n
Oltre ad essere molto, molto<\/em> ripetitivo, questo codice non fa nulla per aiutarci a capire come gli elementi HTML<\/span> a cui stiamo assegnando gli stili sono in relazione uno con l’altro. Con l’annidamento, possiamo scrivere del codice SCSS<\/span> che \u00e8 sia meno ridondante sia pi\u00f9 semplice da seguire:<\/p>\n
body.home {
  .media-unit {
    border: 1px solid #ccc;
    background-color: #fff;
    .right {
      border-left: 1px solid #ccc;
      h1 {
        font-size: 24px;
      }
    }
  }
}
<\/code><\/pre>\n
Dopo aver processato questo risultato nello stesso CSS<\/span> come sopra. Sfortunatamente, la sintassi pi\u00f9 corta non render\u00e0 pi\u00f9 piccoli o pi\u00f9 veloci da caricare i vostri files CSS<\/span>. Ma l’annidamento vi aiuter\u00e0 a dare una struttura logica, ad avere codice pulito e ben organizzato, il che dovrebbe anche renderne pi\u00f9 semplice la gestione nel tempo.<\/p>\n
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:<\/p>\n
.container {
  width: 940px;

  \/\/ If the device is narrower than 940px, switch to 
  \/\/ a fluid layout
  @media screen and (max-width:940px) {
    width: auto;
  }
}
<\/code><\/pre>\n
Quando processate questo file, Sass sa come convertirlo in un valido CSS<\/span>, copiando il selettore .container<\/code> all’interno della media query in questo modo:<\/p>\n
.container {
  width: 940px;
}

@media screen and (max-width:940px) {
  .container {
    width: auto;
  }
}
<\/code><\/pre>\n
Variabili<\/h3>\n
Le variabili<\/em> di Sass sono grandi per due ragioni. In primo luogo, e cosa pi\u00f9 importante, rendono il codice pi\u00f9 semplice da modificare riducendo le duplicazioni. Ma vi permettono anche di assegnare dei nomi<\/em> a speciali valori di propriet\u00e0 come i colori, che vi aiutano a capire l’intento che sta dietro un dato stile.<\/p>\n
In Typekit un certo numero di elementi nella nostra UI usa il nostro personale colore verde, #99cc00<\/code>, o \u201cverde Typekit\u201d per brevit\u00e0. Questo colore appare centinaia<\/em> di volte nel nostro CSS<\/span>, 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, \u00e8 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\u00e0 ovunque, istantaneamente. Potete anche assegnare delle variabili a altre variabili, che vi aiuteranno a mantenere semantico il vostro foglio di stile:<\/p>\n
$typekit-green: \"#99cc00\";
$typekit-link-color: $typekit-green;

a {
  color: $typekit-link-color;
}
<\/code><\/pre>\n
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:<\/p>\n
$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;
}
<\/code><\/pre>\n
Mixins<\/h3>\n
I mixins<\/em> sono degli insiemi riutilizzabili di propriet\u00e0 o regole che includono o si \u201cmischiano\u201d con altre regole. Vengono definiti utilizzando la keyword @mixin<\/code> e vengono inclusi utilizzando la keyword @include<\/code>.<\/p>\n
In questo esempio, sto dicendo a Sass di applicare tutte le propriet\u00e0 di stile contenute nel mixin highlighted-bold-text<\/code> a tutti gli elementi span<\/code> all’interno di .result-with-highlights<\/code>:<\/p>\n
$highlight-color: #ffa;

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

.result-with-highlights {
  span {
    @include highlighted-bold-text;
  }
}
<\/code><\/pre>\n
Una volta che avrete definito un mixin, potrete riutilizzarlo ovunque nello stesso file. Qui dico che gli elementi con una class highlighted<\/code> dovrebbero anche avere le propriet\u00e0 color e font-weight specificate dal mixin:<\/p>\n
.highlighted {
  @include highlighted-bold-text;
}
<\/code><\/pre>\n
Questo \u00e8 molto utile per applicare le nuove propriet\u00e0 CSS3 agli elementi, mentre assicurate una grande compatibilit\u00e0 cross-browser attraverso i vendor prefix e gli stack di fallback. Nei CSS<\/span> regolari, i vendor fallbacks sono noiosi da usare a causa della loro  verbosit\u00e0, 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.<\/p>\n
Qui ho definito un mixin che applica un angolo arrotondato di 4px ad un elemento, utilizzando le propriet\u00e0 con vendor prefix di WebKit, Firefox e IE, seguite dalla propriet\u00e0 standard border-radius<\/code> della specifica CSS3. Ho anche definito l’angolo di curvatura come una variabile, cos\u00ec che sia pi\u00f9 semplice da cambiare in futuro:<\/p>\n
@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;
}
<\/code><\/pre>\n
I mixins possono anche contenere delle intere regole annidate, non solo delle propriet\u00e0. Ecco una versione del familiare hack CSS<\/span> clearfix implementata in un mixin Sass:<\/p>\n
@mixin clearfix {
 \/\/ For modern browsers
  &:before,
  &:after {
    content:\"\";
    display:table;
  }

  &:after {
    clear:both;
  }

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

.group {
  @include clearfix;
}

<\/code><\/pre>\n
Il selettore amperstand (&<\/code>) \u00e8 una convenzione Sass che significa \u201cquesto elemento\u201d. Quando questo codice viene compilato, Sass sostituisce tutti i simboli &<\/code> con il selettore attuale, in questo caso .group<\/code>.<\/p>\n<\/div>\n
\n
Rendere i fogli di stile pi\u00f9 intelligenti<\/h2>\n
Usare i mixins per applicare dei semplici stili \u00e8 fico, ma quello che rende stupendi<\/em> i mixin \u00e8 che possono prendere degli argomenti, proprio come una funzione in JavaScript o in PHP<\/span>. Inoltre, potete usarli insieme ad altre pi\u00f9 avanzate caratteristiche, come le espressioni e le funzioni per spingersi pi\u00f9 lontano con l’organizzazione, per implementare dei grandi e complessi fogli di stile.<\/p>\n
I sistemi di layout a griglia sono una buona applicazione degli script Sass. Ci sono molti grid system CSS<\/span> 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<\/span> per l’intero sistema, anche se pianificate di usare solo poche unit\u00e0 standard di dimensione.<\/p>\n
Per il nostro esempio finale, implementeremo una semplice griglia da 12 unit\u00e0 in Sass. Piuttosto che definire i class name per ciascuna unit\u00e0 della griglia, creeremo un mixin che applicher\u00e0 la width ed i margin corretti per far diventare un elemento un’unit\u00e0 della nostra griglia.<\/p>\n
Per prima cosa, dobbiamo impostare le variabili con la larghezza di column e gutter:<\/p>\n
$column-width: 60px;    \/\/ 12 columns = 720px
$gutter-width: 20px;    \/\/ 11 gutters = 220px
<\/code><\/pre>\n
Poi, faremo fare dei conti a Sass al posto nostro. Un’unit\u00e0 della nostra griglia si espander\u00e0 per un certo numero di colonne pi\u00f9 tutti i gutter tra queste colonne. Per calcolare la width, dobbiamo usare la formula seguente:<\/p>\n
width = (column width \u00d7 span) + (gutter width \u00d7 (span \u2013 1))<\/em><\/p>\n
Adesso possiamo scrivere il nostro mixin. A differenza degli esempi di cui sopra, questo mixin prender\u00e0 un argomento, lo span, che verr\u00e0 passato al nostro mixin come una variabile. Ciascuna unit\u00e0 della griglia avr\u00e0 un float left e per mantenere lo spazio di 20px tra le colonne, ciascuna unit\u00e0 avr\u00e0 un margin-right pari alla larghezza del gutter:<\/p>\n
@mixin grid-unit($span) {
  float: left;
  margin-right: $gutter-width;
  width: ($column-width * $span) + ($gutter-width * ($span - 1));
}
<\/code><\/pre>\n
Semplice, no? Ma c’\u00e8 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:<\/p>\n
.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;
}
<\/code><\/pre>\n
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 \u00e8 possibile con Sass.<\/p>\n
Sass supporta delle espressioni matematiche di base per aiutarci a rendere pi\u00f9 semplice modellare i layout adaptive con larghezza fluida. Qui uso la formula per la responsive width di Ethan Marcotte per creare una versione pi\u00f9 responsive della mia griglia base di cui sopra. Sass non fa conversioni tra le unit\u00e0 CSS<\/span> a meno che non gli venga chiesto esplicitamente, cos\u00ec ho messo tutte le mie formule nella funzione percentage()<\/code> built-in in Sass:<\/p>\n
.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);
  }
}
<\/code><\/pre>\n
Ci sono anche funzioni per trasformare ed aggiustare i colori: potete rendere i colori pi\u00f9 chiari o pi\u00f9 scuri, o aggiustare la saturazione o la trasparenza alpha, proprio all’interno del vostro foglio di stile:<\/p>\n
$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%);
}
<\/code><\/pre>\n
Inoltre, se queste funzioni non fossero abbastanza, potete definire le vostre, condividerle e riusarle tra pi\u00f9 progetti come semplici parziali. Guardate la lista completa delle funzioni built-in in SassScript<\/a> per un assaggio di quello che \u00e8 possibile.<\/p>\n<\/div>\n
\n
E poi?<\/h2>\n
Il sito ufficiale di Sass<\/a> \u00e8 pieno di informazioni utili, inclusa una reference guide completa per l’uso del linguaggio SCSS<\/span><\/a>. Una cosa che potreste trovare utile fin dall’inizio \u00e8 questa lista dei plugin disponibili per text editor SCSS<\/span><\/a>, che forniscono la syntax highlighting e altri tool utili per scrivere il codice Sass nell’editor che preferite.<\/p>\n
Inoltre, il creatore di Sass Hampton Catlin sta attualmente finendo una guida approfondita a Sass per Pragmatic Programmers<\/a>, che potete acquistare e leggere oggi attraverso il programma di Pragmatic Beta Books.<\/p>\n
Oltre al linguaggio Sass core, c’\u00e8 anche Compass<\/a>, una libreria di funzioni e pattern SCSS<\/span> sviluppati da Chris Eppstein, con il supporto integrato del CSS<\/span> reset di Eric Meyer, il Blueprint grid system oltre a tonnellate di CSS3 ed effetti tipografici. I suoi autori l’hanno definito il \u201cjQuery degli stylesheet\u201d… Una descrizione piuttosto adatta! Se state usando la app Scout, avete gi\u00e0 installato il framework Compass. Altrimenti, potete trovare le istruzioni per installarlo ed usarlo sul sito Compass.<\/p>\n
Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
La semplicit\u00e0 di CSS \u00e8 sempre stata una delle sue caratteristiche pi\u00f9 gradite. Tuttavia, man mano che i nostri siti e le nostre app diventano pi\u00f9 grandi e pi\u00f9 complesse e hanno come obiettivo un ampio range di device e dimensioni di schermo, la semplicit\u00e0 tanto gradita all’inizio, quando ci stavamo spostando dai tag font e dai layout basati sulle tabelle, \u00e8 diventata un fardello. Fortunatamente, qualche anno fa gli sviluppatori Hampton Catlin e Nathan Weizenbaum hanno creato una nuova sintassi per i fogli di stile, con caratteristiche che ci aiutano a scrivere e a gestire pi\u00f9 facilmente i nostri CSS sempre pi\u00f9 complessi e poi ad usare un preprocessore per tradurre la nuova brillante sintassi in quella vecchia dei CSS, che i browser sono in grado di interpretare. Vediamo come Sass (syntactically awesome style sheets) possono aiutarci a semplificare la creazione, l’aggiornamento ed il mantenimento di siti e app potenti.<\/p>\n","protected":false},"author":818,"featured_media":7000638,"comment_status":"open","ping_status":"open","template":"","categories":[244,270,271,55,278],"tags":[],"coauthors":[347],"class_list":["post-220","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-il-server-side","category-javascript","category-numero-41-13-dicembre-2011","category-workflow-tools"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000638"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=220"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}