Accentsconagua
Share
In deze tutorial laat ik je zien hoe je CSS-variabelen kunt genereren met Avocode 3. We zullen een ontwerp gebruiken dat is geïmporteerd uit een ontwerptoepassing zoals Adobe XD of Sketch.
Avocode 3 kan eigenlijk variabelen genereren voor preprocessors (Sass, LESS, Stylus etc.) maar omwille van de eenvoud gaan we werken met native CSS-variabelen. We maken variabelen voor de kleuren, typografie en sommige lay-outopties van ons ontwerp. Dit zijn de aspecten van ons eindproduct die we waarschijnlijk willen veranderen (het zou niet erg efficiënt zijn om variabelen voor te maken alles).
Deze video vergezelt mijn nieuwe cursus en het ontwerp dat u in de video ziet, is daarvan afgeleid. Kijk eens of je meer wilt weten over Avocode:
Als je de cursus hebt gevolgd die je hebt gezien, hebben we een hele reeks stalen gemaakt om het maken van een kleurenschema eenvoudig te maken. We hebben ze allemaal genoemd op basis van de plaats in het ontwerp..
Stalen in Avocode
Swatch-naamMet ons geselecteerde staal ziet u de werkelijke kleurwaarde die wordt weergegeven in de eigenschappen. In dit geval is het # 8b959d, dus markeer en kopieer het.
Onder de waarde die u hebt gemarkeerd, ziet u de Variabelen venster. Klik op de + om een nieuwe toe te voegen.
In het dialoogvenster dat verschijnt, plakt u de kleurwaarde in de Vervangen tekst veld. Vervolgens in de Variabele naam veld, voer de variabelenaam in die u wilt gebruiken. Nu worden alle exemplaren van de kleurwaarde in het ontwerp vervangen door de variabele.
Je zult merken dat we het gebruikten _kleur aan het einde van onze variabele reeks. Dit is handig wanneer we naar de code gaan, omdat we het ene type variabele van het andere kunnen onderscheiden.
Hier ziet u hoe variabelen worden weergegeven nadat ze zijn ingesteld:
Hetzelfde proces is van toepassing op andere variabelen. Waar we in het eerste voorbeeld hexadecimale waarden voor kleuren hebben gebruikt, kunt u namen van lettertypefamilies, numerieke waarden, wat u maar wilt, toevoegen. Ze kunnen allemaal op dezelfde manier worden vervangen door CSS-variabelen.
U kunt daarom variabelen gebruiken voor de meeste aspecten van uw CSS. Maten, mediaquery's, maateenheden, het is aan jou! Bekijk de video voor verdere uitleg.
Nu voor een zeer belangrijk deel van dit alles: het exporteren van de CSS-code die onze variabelen in de browser zal opnemen. Zodra al uw variabelen klaar zijn, in de Variabelen paneel klik op de Import / Export knop.
In het dialoogvenster dat verschijnt, klik je op Exporteren tab. U zult alle variabelen vinden die op u wachten om te kopiëren. U kunt de variabelen vervolgens in een stylesheet plakken, maar zorg ervoor dat u er een opneemt :wortel element om ze allemaal in te nestelen, zoals zo:
: root / * variabelen ga hier naartoe * /
U vindt het dan misschien handig om uw variabelen in dit stylesheet te rangschikken zodat ze gemakkelijker te beheren zijn (kleuren met kleuren, typografische variabelen met elkaar, enzovoort).
Dat is hoe je CSS-variabelen uit een ontwerp kunt genereren met behulp van Avocode! Dit gaat veel sneller dan het coderen van CSS-variabelen met de hand, dus het is een zeer nuttige functie waarvan ik zeker weet dat je het leuk zult vinden om te gebruiken.
