Share
Sass este o modalitate excelentă de a accelera dezvoltarea front-end în general, o folosesc în fiecare dintre proiectele mele. Sass (ca și în cazul celorlalte preprocesoare) permite stiluri, funcții și coduri prefixate imbricate în ceea ce se numesc mixins. Fundația are câteva versiuni diferite, în prezent am acoperit cele mai comune variante HTML / CSS, dar acum să vorbim despre o versiune construită pe Sass.
Echipa din spatele Fundației nu numai că a folosit Sass pentru a permite stilul mai prietenos și mai dinamic, dar oferă și o personalizare mai mare în versiunea Sass decât în versiunea HTML / CSS.
Sass este grozav pentru cei dintre voi care, ca mine, sunt primii designeri și coderii secunde. HTML și CSS sunt destul de ușor pentru a învăța și pentru a face treaba, dar este un salt mare pentru a merge de la acele limbi simpliste la jQuery și JavaScript. Folosind Sass vă permite să flirtezi cu ideea de funcții, variabile și cod reutilizabil care ajută cu adevărat la trecerea la limbi mai complexe.
Ne vom plimba chiar aici, și va trebui să folosim terminalul / promptul de comandă pentru a face acest lucru, dar nu fi lăsat ca fiind mai ușor decât pare. Pentru a merge deschizând Terminal (OS X) și lipiți în următoarele:
sudo gem instala zurb-fundație
Poate dura ceva timp pentru a procesa, dar ar trebui să ducă la un ecran ca acesta:
Odată ce ați finalizat acest pas, veți adăuga în mod esențial nucleul Fundației în sistemul dvs., permițându-vă să îl reutilizați după cum doriți, fără a fi nevoie să mergeți la site-ul Fundației. Ce este bine să luați această abordare este că, printr-o altă comandă simplă, puteți actualiza acest cadru de bază reutilizabil fie pentru cel mai recent candidat de lansare sau lansare publică. Pentru a face acest lucru, pur și simplu lipiți una din următoarele în terminal:
sudo gem actualizare zurb-fundație
sudo gem instala zurb-fundație --pre
Există un ultim pas de instalare și asta este de a instala Compass, ceea ce ne va permite să creăm clădiri ale Fundației pentru utilizarea în proiectele noastre. Din nou, acest lucru poate dura ceva timp pentru a fi răbdător. Inserați următoarele:
sudo gem instala busola
După instalare, ar trebui să aveți o ieșire terminală care arată astfel:
Acum, că am trecut prin răsturnările și răsucirile de instalare a unei bijuterii rubin și ținând-o actualizată, să realizăm un proiect astfel încât să putem începe să analizăm această rută de dezvoltare cu Fundația.
Ori de câte ori doriți să începeți un nou proiect, deschideți terminalul și tastați "cd" (directorul de schimbare), fără semnele de vorbire, va trebui să tastați fie o cale, fie să creați un dosar pentru proiectul dvs. și să îl glisați la terminal. Asigurați-vă că există un spațiu între "cd" și calea ta. Urmați acest lucru cu o comandă care va crea efectiv proiectul dvs.:
busola a crea propria-ti-NAME -r zurb-fundatie - folosirea fundatiei
Asigurați-vă că schimbați textul "NUMĂRUL-PROIECT-NUME" pentru numele dvs. real al proiectului și pentru a reveni. Veți vedea apoi multe linii de informații care au ca rezultat o alegere. Această alegere dictează dacă fișierele dvs. Sass vor fi convertite în fișiere CSS de fiecare dată când le salvați sau manual când alegeți să le convertiți. Întotdeauna folosesc cea de-a doua opțiune, care creează automat fișiere CSS ori de câte ori îmi salvez fișierele Sass. Ar trebui să vedeți ceva de genul:
Puteți vedea din acest lucru că s-au întâmplat multe și sa născut proiectul bazat pe fundație. Odată ce ați ales metoda dvs. de compilare folosind metoda "compass compass" sau "compass watch", vă recomandăm să luați codul pe care îl puteți vedea în partea de jos a imaginii. Acest lucru vă va salva puțin timp adăugând foaia de stil de ieșire și normalizați-vă.
De aici puteți începe să vă construiți proiectul folosind Sass.
Dacă utilizați Windows puteți utiliza în continuare versiunea Sass a Fundației, necesită doar câțiva pași pentru a merge. În primul rând, hai să luăm Ruby. Ruby este ceea ce ne va permite să instalăm această versiune bazată pe Sass a Fundației. Spre deosebire de sistemul de operare X, Windows nu are instalat implicit acest lucru, așa că trebuie să mergem.
Acum veți dori cea mai recentă versiune (2.0.0 la momentul scrierii) și, în funcție de arhitectura pe care o utilizați, alegeți standardul pentru mașinile pe 32 de biți sau x64 pentru mașinile pe 64 de biți. Dacă nu sunteți sigur ce, trebuie să faceți clic dreapta pe "Computerul meu" și să faceți clic pe "Proprietăți" pentru a afla. Dacă nu reușiți asta, mergeți cu 32 de biți.
Odată descărcat, executați instalarea. Nu bifați / nu schimbați nimic decât dacă știți ce faceți. După ce ați terminat instalarea, accesați programele, apoi Ruby și faceți clic pe "Start Command Prompt with Ruby". Odată ce ați încărcat copiați următorul cod și inserați-l în linia de comandă, puteți face acest lucru făcând clic dreapta pe bara de sus și mergând la editarea> lipiți.
gem instala zurb-fundație
Veți vedea ceva asemănător cu acest lucru:
Puteți, de asemenea, să păstrați actualitatea la zi cu ajutorul comenzii de construire a publicului general sau a comenzii de lansare a candidatului:
gem actualizare zurb-fundație
gem instala zurb-fundație --pre
Acum că avem setările de bază, să mergem mai departe și să instalăm piesa finală Compass. La fel ca înainte, putem instala Compass folosind o comandă:
gem instala busola
Fiți răbdători, acest lucru va duce la un ecran ca acesta:
Pentru a crea efectiv proiectul dvs., va trebui să comutați la un director precum "Desktop" și să executați o comandă. Puteți face acest lucru introducând "cd" fără semne de vorbire, urmat de un spațiu, urmat de o cale. Pentru a adăuga calea în sine, puteți fie să tastați unul, fie pur și simplu să trageți și să plasați folderul în linia de comandă.
Odată ce ați schimbat directorul, executați această comandă și asigurați-vă că ați schimbat numele-PROIECT-NAME pentru numele dvs. real al proiectului.
busola a crea propria-ti-NAME -r zurb-fundatie - folosirea fundatiei
Si asta e! În continuare, nu există diferențe între Windows și OS X.
Dacă utilizați OS X, există un instrument de dezvoltare excelent numit CodeKit. Această aplicație minime automat JS, CSS, SCSS și convertește SCSS în CSS, ceea ce înseamnă că poți să-l omori pe terminal și să folosești CodeKit. Oferă de asemenea evidențierea erorilor atât pentru JS, cât și pentru SCSS, incluzând biblioteci precum jQuery.
Știu la ce te gândești; "Nu am OS X". Nu vă faceți griji, nu am uitat de voi oameni Windows - puteți obține cea mai apropiată aplicație echivalentă numită Prepros.
În partea următoare vom analiza ce puteți face cu această versiune mai bazată pe dinamică a Fundației Sass, inclusiv personalizarea construirii, schimbarea stilurilor implicite și multe altele.
Accentsconagua