Accentsconagua
Share
I denne opplæringen skal jeg vise deg hvordan du genererer CSS-variabler med Avocode 3. Vi bruker et design som er importert fra et designprogram som Adobe XD eller Sketch.
Avocode 3 kan faktisk generere variabler for preprosessorer (Sass, LESS, Stylus etc.), men for enkelhets skyld skal vi jobbe med innfødte CSS-variabler. Vi lager variabler for designets farger, typografi og noen layoutalternativer. Dette er aspektene av vårt sluttprodukt som vi sannsynligvis vil endre i noen tilfeller (det ville ikke være veldig effektivt å skape variabler for alt).
Denne videoen følger med mitt nye kurs, og designet du ser i videoen, blir tatt fra det. Ta en titt hvis du er interessert i å lære mer om Avocode:
Hvis du fulgte med kurset, har du sett at vi opprettet en hel masse strimler for å gjøre det enkelt å generere et fargeskema, og vi kalt hver etter hvor det er brukt i designen.
Stikkord i Avokode
Swatch navnMed vårt utvalgte utvalg ser du den faktiske fargeverdien som vises i egenskapene. I dette tilfellet er det # 8b959d, så høydepunkt og kopiere det.
Under verdien du har markert, ser du variabler vindu. Klikk på + knappen for å legge til en ny.
I dialogboksen som dukker opp, lim inn fargeværdien i Erstattet tekst felt. Så, i Variabelt navn feltet, skriv inn variabelenavnet du vil bruke. Nå vil eventuelle forekomster av fargevarianten som finnes i designet, bli erstattet med variabelen.
Du vil legge merke til at vi brukte _farge på slutten av vår variabelstreng. Dette vil være nyttig når vi går inn i kode som vi vil kunne skille en type variabel fra en annen.
Slik viser variabler når de er satt:
Den samme prosessen gjelder for andre variabler. Der vi brukte hex-verdier for farger i det første eksemplet, kan du legge til fontfamilienavn, numeriske verdier, uansett hva du vil. De kan alle erstattes med CSS-variabler på samme måte.
Du kan derfor bruke variabler for de fleste aspekter av CSS. Størrelser, medieforespørsler, måleenheter, det er opp til deg! Sjekk ut videoen for nærmere forklaring.
Nå for en svært viktig del av alt dette: Eksporterer CSS-koden som tar våre variabler inn i nettleseren. Når alle variablene er klare, i variabler panelet klikker på Import Eksport knapp.
I dialogboksen som dukker opp, trykk på Eksport fane. Du finner alle variablene som venter på at du skal kopiere. Du kan deretter lime inn variablene i et stilark, men sørg for at du inkluderer en :rot element for å neste dem alle i, slik som:
: root / * variables go here * /
Du kan da finne det nyttig å ordne variablene dine i denne stilarket slik at de er enklere å administrere (farger med farger, typografiske variabler med hverandre og så videre).
Slik kan du generere CSS-variabler fra et design ved hjelp av Avocode! Det er mye raskere å gjøre dette enn å kode CSS-variabler for hånd, så det er en veldig nyttig funksjon som jeg er sikker på at du vil glede deg over.
