Accentsconagua
Share
I den här handledningen ska jag visa dig hur du skapar CSS-variabler med Avocode 3. Vi använder en design som har importerats från en designapplikation som Adobe XD eller Sketch.
Avocode 3 kan faktiskt generera variabler för preprocessorer (Sass, LESS, Stylus etc.) men för enkelhetens skull kommer vi att arbeta med inbyggda CSS-variabler. Vi skapar variabler för våra designers färger, typografi och några layoutalternativ. Det här är aspekterna på vår slutprodukt som vi sannolikt kommer att vilja förändras ibland (det skulle inte vara mycket effektivt att skapa variabler för allt).
Denna video följer med min nya kurs, och den design du ser i videon är hämtad från den. Ta en titt om du är intresserad av att lära dig mer om Avocode:
Om du följde med kursen såg vi att vi skapade en hel massa färgprov för att göra det enkelt att generera ett färgschema och vi namngav var och en enligt var det används i designen.
Svampar i Avocode
Swatch namnMed vår swatch vald kommer du se det faktiska färgvärdet som visas i egenskaperna. I det här fallet är det # 8b959d, markera så och kopiera den.
Under det värde du har markerat ser du variabler fönster. Klicka på + knappen för att lägga till en ny.
I dialogrutan som dyker upp klistra in färgvärdet i Ersatt text fält. Då, i Variabelt namn fält, ange variabelnamnet du vill använda. Nu kommer alla fall av det färgvärde som finns i konstruktionen att ersättas med variabeln.
Du märker att vi använde _Färg i slutet av vår variabelsträng. Detta kommer att vara till hjälp när vi flyttar in i kod så kan vi skilja mellan en typ av variabel från en annan.
Så här visar variablerna upp när de har ställts in:
Samma process gäller för andra variabler. Där vi använde hex-värden för färger i det första exemplet kan du lägga till teckensnittsnamn, numeriska värden, vad du än vill. De kan alla ersättas med CSS-variabler på samma sätt.
Du kan därför använda variabler för de flesta aspekterna av din CSS. Storlekar, mediafrågor, måttenheter, det är upp till dig! Kolla in videon för ytterligare förklaring.
Nu för en mycket viktig del av allt detta: exportera CSS-koden som tar våra variabler i webbläsaren. När alla dina variabler är klara, i variabler panelen klicka på Import Export knapp.
I dialogrutan som dyker upp, tryck på Exportera flik. Du hittar alla variabler som väntar på att du ska kopiera. Du kan sedan klistra in variablerna i ett stilark, men se till att du inkluderar en :rot element för att inhysa dem alla i, som så:
: root / * variabler gå hit * /
Du kan då finna det användbart att ordna dina variabler inom det här formatmallet så att de är enklare att hantera (färger med färger, typgrafiska variabler med varandra och så vidare).
Så kan du skapa CSS-variabler från en design med Avocode! Det är mycket snabbare att göra detta än att koda CSS-variabler för hand, så det är en mycket användbar funktion som jag är säker på att du kommer att tycka om att använda.
