2.3 Create CSS Variables

Hey, welcome back to XD code with Avocode three. In this lesson we're going to go through and set up some variables in Avocode that we can then export all at once and use in our code. Avocode can actually export preprocessor variables but to keep things relatively straight forward, we're just gonna use it's functionality that generates normal CSS property by it's variables. We're going to create variables for the design's color, a little on it's typography, and a couple of layout variables. So as for where you should create variables, you don't want to have a variable for every single property in your site. It's unnecessary, and it can become inefficient. Where you should consider using a variable is any place that you think you might want to easily update something. So color is a perfect fit for that case. If you use variables to control your color scheme, then you can create multiple different color schemes with the same design using relatively little extra effort. The other reason is if you have a value that's gonna be repeated in your code a number of times, then it can be more efficient to use a variable. An example of that might be a common padding width that you're using throughout your site. So let's begin with the colors first. But during the design phase in the first course in this two part series, we created a whole bunch of swatches to make it super easy to generate the color scheme, and we also named each of those swatches according to where the color is used. And we also set up these names so that they could be easily borrowed from to create variable names. Let me just drag this out so we can see the whole lot here. So we wanna create a variable out of the background color of this swatch, which is this color code here. What we're going to do is just select this color code. Anything that you select and highlight in this window here is going to automatically get copied into cash so all I have to do now is release. And you could see it says code copied. Now I'm gonna create a new variable by hitting this plus button down here. And in the replaced text field, I add in that hex code that I just copied. So now anywhere throughout the entire site that this hex code is found, that's gonna be replaced by the variable name that we specify. So we're just gonna borrow from this layer name and we're gonna call our variable site_bg_color. And we're including the word color in this variable so that when all these variables are carried across into code, there's something descriptive in there to differentiate one type of variable from another. So we'll create that. Now, watch this line here. As we create the variable, you'll see this code get replaced by the variable name. So we hit great variable and there you go. Now you can see that the variable is used in here. And it's actually also gonna show up now anywhere else this color is used. We're not actually using this color anywhere else, so I'll show you this on one of the subsequent swatches that we create. So now let's do the same thing again. We'll select that next swatch. We'll highlight our code, which automatically copies it, hit the plus button, place in our hex code, so the variable name based on the layout name, site_wrapper_bg_color. And we'll create that variable. It's being swept into our code here. That color has been used in other places in our site. So for example, this box here, now we can see that that has automatically had the variable placed in here because it's using that same color code. Let's have a quick look at another spot. Once again, using that same blue so there's that same color code. That's really, really handy and it's a great way, just like getting variables all throughout your code, without having to do it all manually. So now we're going to keep going through the same process for each of these swatches. So I'm just going to speed through this because we're not covering anything different each time. It's just the same process. On this next watch, the name that we have here is a little bit too long to have it in its entirety so what we're going to do is use a sort of a short hand. We know that this color is stop one in a linear gradient on panel two. So what we're going to do when we create this variable is we'll call it p2, for panel two, _lg for linear gradient, _s1 for stop one. So then we'll do the same thing on this next one. We'll call it p6 for panel 6, _rg for radial gradient, _s1 for stop 1. And then we'll just do the same thing for the others, so p6, rG, s2, p6, rG, s3. All right, so that's all our colors. Next up, we're going to get the font families that are being used, and save those as variables as well. So we're only using two font families. We're using Amatic SC and Railway. So we're just going to select this toggle here which has Amatic SC. And then we're going to do the same thing as we did with our colors, just highlight the portion of text that we want to have replaced with the variable. That copies it. Hit the plus button, paste in the copied text, and this, we're gonna call title_font_family, so that that's descriptive like we talked about. We'll do the same thing for the Railway font. Copy the text. Make a variable. And this one we're gonna call main, cuz it's just our main font family that we're using, _font_family. Now we only have a couple more variables to make, and these are gonna be variables to control layout. And we have a consistent amount of spacing throughout our design. And before we turned off these measures that we had, but these are in there to indicate the size of the spacing at various points in the design. So we know we've got an 80 pixel spacing amount that's used here, and we know that further down, We have 120 pixel spacing amount. In our typography we also have a 40 pixel amount. And then all the way up at the top here we have a 20 pixel amount of spacing along here. We can actually check on that using the ruler or measurer. If we check this box here and then hover over this gap, we can see that that's 20 pixels. So we've got 20 pixels, 40 pixels, 80 pixels, and 120 pixels. We're actually going to convert all of those into rem values. So let's start with that 80 pixel value. The system is actually going to automatically convert these pixel dimensions to rems for us, as we can see here. So we've got 80 pixels is 5 rem, and we're gonna copy that, make a new variable, paste in our 5 rem value, and we're gonna call it spacing_large. And we're gonna scroll down, all the way down here, do the same thing again. So we've got 120 pixel value, this 7.5 rem. I'm gonna save that out as spacing_extra_large. Now, we also wanna get a value in to represent our spacing of 40 pixels. We know that that's half the amount of this value that we just defined as spacing large. So that means we need to save it out as 2.5 rem. So let's just make a new variable. This time we'll just type it in manually, 2.5 rem. Give that variable the name spacing_medium. Now we need another one that is half that amount again, half the spacing medium amount. And that is for the top spacing that we have up here, so half of 2.5 is 1.25 rem, and we give the variable name spacing_small. So now wherever you wanna set up this amount of spacing, all you need to do is use the spacing large variable. If you wanna have this little small amount of spacing, then you would use the spacing small variable. And one of the reasons that we use variables for the spacing is that the value of variables can be changed in media queries. So as we shrink down this design to suit a smaller viewpoint, we don't want as wide gaps around it. We wanna try to crunch things down and take more advantage of that limited amount of space. So what we can do in the media query is redefine the value of these four spacing variables that we just set up. So by just changing those four variables, we can completely shrink down the entire layout of the site. And there's one other thing that we want to also control in our media queries the same way and that is the width of the SPG that we exported earlier representing this arrow here. We don't want this arrow to stay the same size, even as the screen shrinks down. We wanna keep it as a nice proportional width. So we're going to save out the width of this image as a variable, as well, so just like we did before, highlight this text, create a new variable, paste it in. And we're gonna call this one arrow_width. So you'll see why that's so useful when we get through to the process of setting up media queries later. So now we've got all the variables that we need. They're all here. In the next lesson, we're gonna get the very basics of that kind of setup, including adding in the HTML shell, linking to the CSS file, and establishing these variables in the CSS. So we're gonna step through that in the next lesson. I'll see you then.