How to Generate CSS Variables With Avocode 3 | How To
Avocode 3 can actually generateÂ variables for preprocessors (Sass, LESS, Stylus etc.) but for the sake of simplicity weâ€™re going to be working with native CSS variables. Weâ€™ll create variables for our designâ€™s colors, typography, and some layout options. These are the aspects of our final product which weâ€™re likely to want to change sometimes (it wouldnâ€™t be very efficient to create variables for everything).
Avocode 3 and CSS Variables
This video accompanies my new course, and the design you see in the video is taken from that. Take a look if youâ€™re interested in learning more about Avocode:Â
When youâ€™re taking a design and turning it into a fully coded website, working with the same software that was used to create that design in the first place…
Starting With Colors
If you followed along with the course youâ€™ll have seen we created a whole bunch of swatches to make it easy to generate a color scheme, and we named each one according to where itâ€™s used in the design.
With our swatch selected youâ€™ll see the actual color value displayed in the properties. In this case itâ€™s
#8b959d, so highlight and copy it.
Create a Variable
Underneath the value youâ€™ve highlighted youâ€™ll see the Variables window. Click the + button to add a new one.
In the dialog which pops up, paste the color value into the Replaced Text field. Then, in the Variable Name field, enter the variable name youâ€™d like to use. Now, any instances of the color value found in the design will be replaced with the variable.
Youâ€™ll notice we used
_color at the end of our variable string. This will be helpful once we move into code as weâ€™ll be able to distinguish one type of variable from another.
Hereâ€™s how variables show up once theyâ€™ve been set:
The same process applies to other variables. Where we used hex values for colors in the first example, you can add font family names, numeric values, whatever you like. They can all be replaced with CSS variables in the same way.
You can therefore use variables for most aspects of your CSS. Sizes, media queries, units of measurement, itâ€™s up to you! Check out the video for further explanation.
Now for a very important part of all this: exporting the CSS code that will take our variables into the browser. Once all your variables are ready, in the Variables panel click the Import/Export button.
In the dialog that pops up, hit the Export tab. Youâ€™ll find all the variables waiting for you to copy. You can then paste the variables into a stylesheet, but make sure you include a
:root element to nest them all in, like so:
/* variables go here */
You might then find it useful to arrange your variables within this stylesheet so that theyâ€™re easier to manage (colors with colors, typgraphic variables with each other, and so on).
Thatâ€™s how you can generate CSS variables from a design using Avocode! Itâ€™s much quicker doing this than coding CSS variables by hand, so itâ€™s a very useful feature which Iâ€™m sure youâ€™ll enjoy using.
- Adobe XD to Code With Avocode 3
- How to Use CSS Variables for Animation
- 6 Preprocessor Features Coming to Native CSS