() translation by (you can also view the original English article)
Sass è la miglior via per velocizzare lo sviluppo front-end in generale, lo uso in ogni mio progetto. Sass (come tutti gli altir preprocessori) permette stili nidificati, funzioni e codici già scritti in cui vengono chiamati mixins. Foundation ha alcune versioni differenti, attualmente ci siamo occupati delle variati più comuni di HTML/CSS, ma ora parliamo di una versione costruita su Sass.
Il team dietro Foundation non ha solo usato Sass per applicare uno stile dinamico e pulito, ma anche per offrire un'ottima personalizzazione sulla versione Sass rispetto ad una versione in HTML/CSS.
Sass è ottimo per coloro che, come me, sono grafici per primo e sviluppatori per secondo. HTML e CSS sono molto facili da imparare e avere il lavoro finito, ma, è un grande salto andare da semplici linguaggio a jQuery e JavaScript. Usare Sass, ti permette di aver confidenza con l'idea di funzioni, variabili e codice riusabile in cui ti aiuteranno veramente nelle transizioni verso linguaggi complessi.
Come iniziare: OS X
Partiremo proprio da qui, e abbiamo bisogno di usare il terminale/prompt dei comandi per farlo, quindi non rimandare che è più facile di quanto sembri. Per iniziare, apri Terminale (OS X) e incolla questa seguente linea:
sudo gem install zurb-foundation
Potrebbe impiegare un po' per processare il tutto, il risultato dovrebbe circa essere questo:
Una volta completato questo step, hai aggiunto il core di Foundation nel tuo sistema, permettendoti di riusarlo come vuoi senza dover andare sul sito di Foundation. La cosa interessante di questo approccio è che con un altro semplice comando, puoi aggiornare questo core del framework riusabile all'ultima versione pubblica o release candidate. Per fare ciò incolla questa seguente linea nel terminale:
sudo gem update zurb-foundation
sudo gem install zurb-foundation --pre
C'è un altro step finale dell'installazione e questo è l'installazione di Compass, che ci permetterà di creare build di Foundation da usare nei nostri progetti. Di nuovo, questo potrebbe impiegare un po' di tempo, sii paziente. Incolla questa linea:
sudo gem install compass
Dopo l'installazione dovresti avere l'output del terminale come questo:
Ora che abbiamo attraversato la parte più difficile, installato ruby gem e mantenerlo aggiornato, iniziamo ad impostare il progetto così da poter iniziare ad analizzare il percorso di sviluppo con Foundation.
Setup progetto: OS X
Ogni volta che vuoi iniziare un nuovo progetto, apri semplicemente il terminale e digita "cd" (cambia cartella), senza le virgolette, poi devi digitare il percorso o creare una cartella per il tuo progetto e trascinarlo sul terminale. Assicurati che ci sia uno spazio tra "cd" e il tuo percorso. Segui questo con un comando che crea il tuo progetto:
compass create NOME-DEL-PROGETTO -r zurb-foundation --using foundation
Assicurati di cambiare il testo "NOME-DEL-PROGETTO" con il nome del progetto e premi INVIO. Dovresti poi vedere tante tante linee di informazioni arrivato ad una scelta. In parole povere questo comando converità tutti i tuoi file Sass in file CSS ogni volta che li salverai o manualmente quando sceglierai di farlo. Io uso sempre la seconda scelta ossia la creazione automatica dei file CSS quando salvo i miei file Sass. Dovresti vedere qualcosa del genere:
Puoi vedere da qui che è stato fatto molto e il tuo progetto basato su Foundation è nato. Una volta che hai scelto il metodo di compilazione, usando "compass compile" oppure "compass watch", vorresti trascinare il codice che puoi vedere in basso all'immagine. Questo ti salverà solamente un po' di tempo in quanto aggiunge l'output in stylesheet e correttamente normalizzato.
Da qui puoi partire a costruire il tuo progetto usando Sass.
Come iniziare: Windows
Se stai usando Windows puoi ancora usare la versione Sass di Foundation, servono solo alcuni step in più. Prima di tutto, installiamo Ruby. Ruby è ciò che ci permetterà per installare la versione di Foundation basato su Sass. A differenza di OS X, Windows non lo ha installato di default, quindi dovremmo andare su questa pagina per scaricarlo.
Ora dovrai prendere l'ultima versione (2.0.0 quella che sto usando) anche a seconda di quale architettura stai usando, ad esempio lo standard 32-bit oppure x64 per dispositivi 64-bit. Se non sei sicuro di quale prendere, fai semplicemente click col destro su "Il mio computer" e vai su "Proprietà" per trovarlo. Se non trovi informazioni utili, vai per la 32-bit.
Una volta scaricato, vai avanti con l'installazione. Non selezionare/cambiare nulla a meno che tu sai cosa stai facendo. Terminata l'installazione, vai su Programmi, poi Ruby e clicca su "Avvia Prompt dei Comandi con Ruby". Una volta che si è caricato il tutto, copia e incolla il seguente codice all'interno del prompt dei comandi, puoi farlo cliccando con il destro sulla barra in alto e fare modifica > incolla.
gem install zurb-foundation
Vedrai qualcosa di simile a questo:
Puoi anche mantenere Foundation aggiornato usando il comando per le build pubbliche o per le release candidate:
gem update zurb-foundation
gem install zurb-foundation --pre
Ora che abbiamo il tutto, andiamo ad installare il pezzo finale, Compass. Come prima, possiamo installare Compass usando il comando:
gem install compass
Sii paziente, comparirà un risultato come questo:
Setup Progetto: Windows
Per creare il tuo progetto, devi cambiare cartella come ad esempio "Desktop" ed eseguire il comando. Puoi farlo digitando "cd" senza le virgolette, seguito da uno spazio, e seguito dal percorso. Per aggiungere il percorso puoi o scriverlo, oppure trascinando la cartella all'interno del prompt dei comandi.
Una volta cambiata la cartella, esegui questo comando e assicurati che hai cambiato NOME-DEL-PROGETTO con il nome del progetto.
compass create NOME-DEL-PROGETTO -r zurb-foundation --using foundation
E questo è tutto! Proseguendo non ci sono alcune differenze tra Windows e OS X.
Tool Utili
Se usi OS X, c'è un ottimo tool di sviluppo chiamato CodeKit. Questa applicazione minimizza automaticamente JS, CSS, SCSS- e converte SCSS in CSS, significa che puoi eliminare il terminale e usare CodeKit al suo posto. Ti offre anche una visuale degli errori per JS e SCSS, incluse librerie come jQuery.
Lo so cosa stai pensando; "Io non ho OS X". Non ti preoccupare, non ho dimenticato la gente di Windows- puoi prendere l'applicazione quasi equivalente chiamato Prepros.
Prossimamente..
Nella prossima parte, guarderemo a cosa puoi fare con una versione di Foundation basata su un Sass dinamico, inclusa la personalizzazione, cambiare stili di default e tanto altro.
