3.4 Day 4: Variables

Welcome to day four where you will learn about the variables. These are entities that can hold a certain value and can be reused throughout the code. Let's begin. All right, so let's see what we can use variables for. Well, first of all, you can use them for values that repeat themselves. For example, this text color here, 333. We can also find it, let's see, way down here in the nav, list item a. So what we can do here is we can declare a variable. And we're gonna do that just like we would declare any CSS property that has a value. We'll start with the dollar sign. This is the character that all variables begin with. Now instead of this value, we can actually replace it with the variable name. In our case, text-color. And we'll do the same down here. Now the thing is, when we compile this, we get the correct CSS code. We had the color here, and we also get the color right here. But now, if I wanna change this color, let's say to 888, and I save it, you'll notice that the value is changed in both places. So that's the beauty of variables. You use them throughout your code, and if you wanna change them, you just change them in one place and the new value will be put in all the places that that variable is found. So this is for repeating values. Now what else could variables be used for? Well, they could be used, for example, to set this font-family. So if instead of this, I were to change, or I were to create a variable called text-font-family and I would paste in that value and then go here and I would put that variable instead. This will essentially make my job easier to change certain values. So I can have like a set up section right here at the top where I can set text-color, I can set the font-family, I can set maybe some different colors. For example, I can do something called white and I can set it to the white hex code. And then instead of this, I would just use white. So this makes things easy for me. It doesn't matter how many times I've used 888 or I've used Helvetica, changing it here on the top will change it in all of the other places as well. Now another cool thing you can do with variables is to create like increments. So if I set here a base line of 1.5 ems, I can actually do operations with it. So I can go, for example, all the way down here where I see a padding of 3em. Instead of this, I can change it to baseline x 2. This belongs more in the operations lesson, which we'll talk about very soon. But you need to know that you can also do this. So now if I change the baseline variable here, it will also change the padding. So, if I put 2.5, this will be compiled to, let's find it, where it is. Where is it? There it is, padding 5em. So, you can do a lot with this. Now, finally I wanna talk about the global flag. Because what happens is, there's a thing called variable scope. And that basically means where that variable is accessible. Now, I defined these variables at the root of my style sheet. So they're available in every single selector. Now if I were to define a variable, for example, in here. We'll say variable defined inside a selector. And we'll say border-color. We'll define that as this value. Now, this value here, we can find it in the border, and we'll replace it with a variable, and everything compiles properly, as you can see here. But the problem is, we also have that value here, so if I'm gonna replace this with border-color, yeah, remember this is a totally different selector. So if I were to save this, I would get an error. And the error will say that I have an undefined variable, border-color. And that's because variables are only available inside the selector that are defined. So because I defined these variables at root level, they're available everywhere, but because I defined this inside a selector, it's only available inside the selector. Now, if I want to use a variable defined in a selector globally, I can simply use the flag global and that will essentially make it available so I can use it in some other places as well. And here, you can see that my CSS is now compiled, and it's compiled correctly. And that's it for variables. Now, for your exercise, you have an SCSS file, and your assignment is to use variables wherever you see fit to make this code easier to maintain. Good luck. That's it for variables, definitely a major feature in CSS preprocessors and in turn, in SASS. Day five is about something called variable interpolation. That's coming up next.