Share
Sass è un ottimo modo per accelerare lo sviluppo front-end in generale, lo uso in ognuno dei miei progetti. Sass (come con tutti gli altri preprocessori) consente di inserire stili, funzioni e codici pre-nidificati in quelli che sono chiamati mixins. Foundation ha alcune versioni differenti, attualmente abbiamo coperto le varianti HTML / CSS più comuni, ma ora parliamo di una versione costruita su Sass.
Il team dietro Foundation ha non solo utilizzato Sass per consentire uno stile più amichevole e dinamico, ma offre anche una maggiore personalizzazione nella versione Sass rispetto alla versione HTML / CSS.
Sass è ottimo per quelli di voi che, come me, sono i designer prima e i programmatori in secondo piano. HTML e CSS sono abbastanza facili da imparare e portare a termine il lavoro, ma è un grande salto per passare da quei linguaggi semplicistici a jQuery e JavaScript. L'uso di Sass ti permette di flirtare con l'idea di funzioni, variabili e codice riusabile che aiuta davvero nella transizione verso linguaggi più complessi.
Ci tufferemo proprio qui, e dovremo usare il terminale / prompt dei comandi per farlo, ma non rimandare perché è più facile di quanto sembri. Per iniziare apri Terminale (OS X) e incolla quanto segue:
sudo gem installa zurb-foundation
Potrebbe richiedere del tempo per l'elaborazione, ma dovrebbe risultare in una schermata come questa:
Una volta completato questo passaggio, avrai sostanzialmente aggiunto il nucleo di base al tuo sistema, permettendoti di riutilizzarlo come preferisci senza dover andare sul sito della Fondazione. La cosa interessante di adottare questo approccio è che con un altro semplice comando è possibile aggiornare questo framework riutilizzabile di base all'ultima build pubblica o release candidate. Per fare ciò basta incollare uno dei seguenti nel terminale:
sudo gem update zurb-foundation
sudo gem installa zurb-foundation --pre
C'è un ultimo passaggio di installazione e quello di installare Compass, che ci permetterà di creare build di Foundation da utilizzare nei nostri progetti. Ancora una volta, questo potrebbe richiedere del tempo, quindi sii paziente. Incolla quanto segue:
sudo gem installare bussola
Dopo l'installazione dovresti avere un'uscita Terminale simile a questa:
Ora che abbiamo attraversato i meandri dell'installazione di una gemma di rubino e mantenendola aggiornata, impostiamo un progetto in modo che possiamo iniziare ad analizzare questo percorso di sviluppo con Foundation.
Ogni volta che vuoi iniziare un nuovo progetto, apri semplicemente il terminale e digita "cd" (cambia directory), senza i segni vocali, quindi dovrai digitare un percorso, o creare una cartella per il tuo progetto e trascinarla in al terminale. Assicurati che ci sia uno spazio tra "cd" e il tuo percorso, però. Segui questo con un comando che creerà effettivamente il tuo progetto:
bussola crea YOUR-PROJECT-NAME -r zurb-foundation --using foundation
Assicurati di cambiare il testo "TUO-PROGETTO-NOME" per il tuo vero nome del progetto e premi Invio. Vedrai quindi molte molte linee di informazioni risultanti in una scelta. Questa scelta determina se i file Sass verranno convertiti in file CSS ogni volta che li salvi, o manualmente quando scegli di convertirli. Io uso sempre la seconda scelta, che crea automaticamente file CSS ogni volta che salvi i miei file Sass. Dovresti vedere qualcosa di simile a questo:
Da questo si può vedere che è successo molto e il tuo progetto basato sulla Fondazione è nato. Una volta scelto il metodo di compilazione utilizzando il metodo "compila bussola" o "orologio da bussola", puoi prendere il codice che puoi vedere nella parte inferiore dell'immagine. Questo ti farà risparmiare un po 'di tempo in quanto aggiunge il foglio di stile di output e si normalizza.
Da qui puoi iniziare effettivamente a costruire il tuo progetto usando Sass.
Se stai usando Windows puoi ancora usare la versione Sass di Foundation, bastano pochi passi per andare avanti. Prima di tutto, andiamo a prendere Ruby. Ruby è ciò che ci permetterà di installare questa versione di Foundation basata su Sass. A differenza di OS X, Windows non ha installato questo di default, quindi dovremo andare a prenderlo.
Ora vorrai l'ultima versione (2.0.0 al momento della scrittura) e, a seconda dell'architettura che stai utilizzando, scegli lo standard per macchine a 32 bit o x64 per macchine a 64 bit. Se non sei sicuro di quale, devi semplicemente fare clic con il tasto destro del mouse su "Risorse del computer" e fare clic su "Proprietà" per scoprirlo. In caso contrario, andare con 32-bit.
Una volta scaricato, esegui l'installazione. Non spuntare / cambiare nulla a meno che tu non sappia cosa stai facendo. Dopo aver completato l'installazione, vai su Programmi, quindi su Ruby e fai clic su "Avvia prompt dei comandi con Ruby". Una volta caricato, copia il codice seguente e incollalo nel prompt dei comandi, puoi farlo facendo clic con il tasto destro sulla barra in alto e andando a modificare> incolla.
gem installa zurb-foundation
Vedrai qualcosa di simile a questo:
È inoltre possibile aggiornare la Foundation utilizzando il comando di generazione pubblica generale o il comando release candidate:
gem update zurb-foundation
gem installa zurb-foundation --pre
Ora che abbiamo le impostazioni di base, andiamo avanti e installiamo il pezzo finale, Compass. Proprio come prima, possiamo installare Compass usando un comando:
gemma installare bussola
Sii paziente, questo si tradurrà in una schermata come questa:
Per creare effettivamente il tuo progetto dovrai passare a una directory come "Desktop" ed eseguire un comando. Puoi farlo digitando "cd" senza i segni del parlato, seguito da uno spazio, seguito da un percorso. Per aggiungere il percorso stesso è possibile digitare uno in, o semplicemente trascinare e rilasciare la cartella nel prompt dei comandi.
Una volta modificata la directory, esegui questo comando e assicurati di modificare YOUR-PROJECT-NAME per il tuo nome di progetto effettivo.
bussola crea YOUR-PROJECT-NAME -r zurb-foundation --using foundation
E questo è tutto! A seguito di ciò non ci sono differenze tra Windows e OS X.
Se usi OS X c'è un ottimo strumento di sviluppo chiamato CodeKit. Questa applicazione riduce automaticamente JS, CSS, SCSS- e converte SCSS in CSS, il che significa che puoi uccidere terminale e utilizzare CodeKit. Offre anche l'evidenziazione degli errori per JS e SCSS, comprese le librerie come jQuery.
So cosa stai pensando; "Non ho OS X". Non preoccuparti, non mi sono dimenticato dei tuoi utenti Windows: puoi prendere l'applicazione equivalente più vicina chiamata Prepros.
Nella parte successiva vedremo cosa si può fare con questa versione di Foundation più dinamica di Sass, inclusa la personalizzazione della build, la modifica degli stili di default e molto altro.
Accentsconagua