Now, if you're familiar and remember back to when we talked about SCSS variables, they are a very helpful way for being able to store values inside of a variable name that you can call from anywhere in the application that has access and has the ability to read SCSS files.

So we're only gonna be calling them from other SCSS files. But it's gonna make life much easier for us because let's imagine that we have a scenario like we are about to have where we wanna change this link. If you go and look at the final version here, do you see how these links start out as gray, and then they don't turn this black color until you hover over them?

Well, that gray is a very specific hexadecimal color. So, we'd have to go and every time we wanna use that gray we'd have to do something like the pound sign, then 8A8A8A which is the color of gray we're looking for hit save, and this works but if we wanna call this from anywhere else in the application and this is also going to be the case for probably about eight colors, it's gonna be very hard for us to always remember that.

I'm not that great at memorization so because of that this would not be something that would be fun for me. I don't constantly have to go back and look at the exact hexadecimal value that I would use and I would not find that enjoyable. But what I can do is something like just say $grey and I will know that I have access to that gray value, and so that is really kind of just talks to how important and how helpful variables can be in SCSS.

So let's go into our main import file here and even above the base I'm going to create a variables.scss file. Now we have not created this file yet, we're just calling it. So I'm gonna copy this, switch over into the style directory hit new file and just paste in that name and now we have this file available to us.

I'm going to copy over a set of colors that we're gonna be using throughout this application. So I'm just gonna paste this in, you can grab these in the show notes and you can see that we have colors like teal, dark teal, charcoal, offwhite, blue, warning, and then gray and we may add a few more to this list as we go through the course but I'm just going to save that, close out of it, and let's save our main.scss file now that we actually have this file in the system.

Now I can have this gray color, hit save, and if I come back to Chrome you can see that this is now working perfectly.

So now we have the kinda color we're wanting to use but we can use this $grey name and be able to use variables.

Now before we end this guide I want to add one more hover effect here. So what I would like to do is you see that we're coloring the border-bottom but if you notice the actual text is still that light gray color. So now let's also make sure the color changes, so I'm gonna say color black and we don't need a variable name for black because black is built directly into SCSS and CSS, we can just call it.

So there's no need to do something like go into your variables and create a variable called black and then always call $black. The only reason why you'd wanna do that is maybe if the designer created a set of colors for you to use and the black is not actually the way that SCSS or CSS thinks that black is.

If it's some other special black like say it's some kind of special hexadecimal color that's off black, like charcoal, then you'd wanna do that. But for our cases, I'm perfectly fine with just using the standard black color.

So let's go test this out, now if I hover over any of these, oop, it looks like this is not working. So that's fine, let's research it and let's see exactly why it is and you know why it's because this nav-link-wrapper is going to change any colors to be black but the links inside of them are not changing.

So what we can do is I can pull this out and nest this inside of the link, we don't wanna add the border-bottom, and we can get rid of the color here. So now you can see we have two hover rules,

a {
    color: $grey;
    text-decoration: none;
    &:hover {
        color: black;
    }
}

&:hover {
    border-bottom: 1px solid black;
}

and now let's see if this is working and there you go, this is working perfectly, exactly like the design is.

So this is giving us exactly what we're looking for and now that we have our animations set up, we have our border bottoms, and now we have access to our full set of variable color names, in the next guide we are going to start building out these kinda spaces in between the links and we're gonna see the best way to set up these spaces so that they can fit on the left side of the page and not be all scrunched together.

Resources

• Color set
  $teal: #26bfd4;
  $dark-teal: #207b88;
  $charcoal: #42454a;
  $offwhite: #f6f6f6;
  $blue: #008dff;
  $warning: #922a2a;
  $grey: #8a8a8a;

• Source Code