Accentsconagua
Share
În acest tutorial vă voi arăta cum să generați variabile CSS cu Avocode 3. Vom folosi un design care a fost importat dintr-o aplicație de proiectare precum Adobe XD sau Sketch.
Avocatul 3 poate genera variabile pentru preprocesoarele (Sass, LESS, Stylus etc.) dar din motive de simplitate vom lucra cu variabile CSS native. Vom crea variabile pentru culorile noastre de design, tipografie și câteva opțiuni de aspect. Acestea sunt aspectele produsului final pe care probabil că vom dori să îl modificăm uneori (nu ar fi foarte eficient să creați variabile pentru Tot).
Acest videoclip însoțește noul meu curs, iar designul pe care îl vedeți în videoclip este luat de la acesta. Aruncați o privire dacă sunteți interesat să aflați mai multe despre Avocode:
Dacă ați urmat, împreună cu cursul pe care l-ați văzut, am creat o grămadă de mostre pentru a face mai ușor generarea unei scheme de culoare și am numit fiecare dintre ele în funcție de locul în care este utilizat în proiectare.
Swatches în avocado
Nume SwatchCu ajutorul specimenului nostru selectat veți vedea valoarea reală a culorii afișată în proprietăți. În acest caz este # 8b959d, astfel evidențiați și copiați-l.
Sub valoarea pe care ați evidențiat-o, veți vedea variabile fereastră. Apasă pe + pentru a adăuga unul nou.
În dialogul care apare, lipiți valoarea culorii în Text înlocuit camp. Apoi, în Nume variabilă , introduceți numele variabilei pe care doriți să o utilizați. Acum, orice instanță a valorii de culoare găsită în proiect va fi înlocuită cu variabila.
Veți observa că am folosit-o _culoare la sfârșitul șirului nostru variabil. Acest lucru va fi de ajutor când vom trece în cod, deoarece vom putea distinge un tip de variabilă de altul.
Iată cum apar variabilele după ce au fost configurate:
Același proces se aplică și altor variabile. În cazul în care am folosit valori hex pentru culori în primul exemplu, puteți adăuga nume de familie, valori numerice, orice doriți. Ele pot fi înlocuite cu variabile CSS în același mod.
Prin urmare, puteți utiliza variabile pentru majoritatea aspectelor CSS. Dimensiuni, interogări media, unități de măsură, depinde de dvs.! Consultați videoclipul pentru explicații suplimentare.
Acum, pentru o parte foarte importantă din toate acestea: exportarea codului CSS care va lua variabilele noastre în browser. Odată ce toate variabilele dvs. sunt gata, în variabile faceți clic pe panou Import Export buton.
În dialogul care apare, apăsați pe Export tab. Veți găsi toate variabilele care vă așteaptă să copiați. Puteți apoi să inserați variabilele într-o foaie de stil, dar asigurați-vă că includeți o :rădăcină element pentru a le cuibui pe toate, cum ar fi:
: root / * variabilele intră aici * /
S-ar putea fi util să vă aranjați variabilele în această foaie de stil astfel încât acestea să fie mai ușor de gestionat (culori cu culori, variabile tipografice unul cu celălalt și așa mai departe).
Așa puteți genera variabilele CSS dintr-un design folosind Avocode! Este mult mai rapid acest lucru decât codarea variabilelor CSS de mână, deci este o caracteristică foarte utilă pe care sunt sigur că vă veți bucura de utilizare.
