Accentsconagua
Share
In questo tutorial ti mostrerò come generare le variabili CSS con l'Avocode 3. Useremo un disegno che è stato importato da un'applicazione di progettazione come Adobe XD o Sketch.
L'avocode 3 può effettivamente generare variabili per i preprocessori (Sass, LESS, Stylus ecc.) Ma per semplicità lavoreremo con le variabili CSS native. Creeremo variabili per i colori, la tipografia e alcune opzioni di layout del nostro design. Questi sono gli aspetti del nostro prodotto finale che probabilmente vorremmo cambiare a volte (non sarebbe molto efficiente creare variabili per) qualunque cosa).
Questo video accompagna il mio nuovo corso e il design che vedi nel video è tratto da quello. Dai un'occhiata se sei interessato a saperne di più su Avocode:
Se hai seguito il corso, avrai visto che abbiamo creato un sacco di campioni per semplificare la generazione di una combinazione di colori, e li abbiamo denominati in base a dove è stato utilizzato nel design.
Campioni in Avocode
Il nome del campioneCon il nostro campione selezionato vedrai il valore del colore effettivo visualizzato nelle proprietà. In questo caso lo è # 8b959d, quindi evidenzia e copia.
Sotto il valore che hai evidenziato vedrai il variabili finestra. Clicca il + pulsante per aggiungerne uno nuovo.
Nella finestra di dialogo che si apre, incolla il valore del colore nel Sostituito il testo campo. Quindi, nel Nome variabile campo, inserisci il nome della variabile che desideri utilizzare. Ora, qualsiasi istanza del valore del colore trovato nel disegno verrà sostituita con la variabile.
Noterai che l'abbiamo usato _colore alla fine della nostra stringa variabile. Questo sarà utile quando entreremo nel codice in quanto saremo in grado di distinguere un tipo di variabile da un altro.
Ecco come vengono visualizzate le variabili una volta impostate:
Lo stesso processo si applica ad altre variabili. Dove abbiamo usato i valori esadecimali per i colori nel primo esempio, puoi aggiungere nomi di famiglia di font, valori numerici, qualunque cosa tu voglia. Possono essere tutti sostituiti con variabili CSS allo stesso modo.
Puoi quindi utilizzare le variabili per la maggior parte degli aspetti del tuo CSS. Dimensioni, media query, unità di misura, tocca a voi! Guarda il video per ulteriori spiegazioni.
Ora per una parte molto importante di tutto questo: esportare il codice CSS che porterà le nostre variabili nel browser. Una volta che tutte le variabili sono pronte, nel variabili pannello clicca il Import / Export pulsante.
Nella finestra di dialogo che si apre, premi il tasto Esportare scheda. Troverai tutte le variabili in attesa di essere copiate. È quindi possibile incollare le variabili in un foglio di stile, ma assicurarsi di includere a :radice elemento per annidarli tutti, in questo modo:
: le variabili di root / * vanno qui * /
Potresti quindi trovare utile organizzare le variabili all'interno di questo foglio di stile in modo che siano più facili da gestire (colori con colori, variabili tipografiche tra loro e così via).
È così che puoi generare variabili CSS da un design usando Avocode! È molto più rapido farlo a mano che codificare le variabili CSS, quindi è una funzionalità molto utile che sono sicuro che ti divertir.
