Color Variables

So here's another misconception I've heard about Sass. 0:00 I'm a designer. 0:03 If I use Sass, it'll change the way I think, and turn me into a developer. 0:04 No, Sass isn't gonna take control of your mind and turn you into a developer. 0:08 But as we've seen, it can change the way you write CSS. 0:12 Even though Sass does borrow features from certain programming languages, 0:16 they're only there to make projects easier to build and maintain. 0:19 Like variables, for instance. 0:22 Earlier, I mentioned how CSS can be repetitive. 0:24 Well, Sass variables make the repetitive nature of CSS easier to manage. 0:27 Because they let us store information that's reused throughout a project. 0:31 Like values for colors, font stacks, media query break points, 0:35 or any reusable CSS value. 0:38 So now we can clean up our code even further with variables. 0:41 Because variables reduce a lot of the duplication in CSS declarations and 0:45 they also make our code easier to read. 0:49 Now, I like to keep all of my variables in a separate partial 0:52 located inside the base directory. 0:55 So let's create a New File inside our base folder. 0:58 And we're going to name it _variables.scss. 1:02 So before we move on, 1:10 let's not forget to import this new partial into our stylesheet. 1:11 So we'll go over to the index partial and we're going to import it at the very top. 1:15 So I'm going to copy the base partial import, 1:21 paste it right above it, and change the filename to variables. 1:25 Now we'll need to make sure that we are importing the variables partial first, 1:31 since this will contain all the global dependencies in our project. 1:36 So now I can go ahead and save index. 1:40 And close it out. 1:43 And back in our variables partial, let's first create variables for 1:44 color values in our project. 1:48 Now, there are a lot of ways we can declare color variables, and you'll see 1:50 tons of discussions and opinions on the web on how to write or structure these. 1:55 So let's do what makes sense for our project here. 1:59 So we're going to use a two-tier color variable method. 2:02 The first tier will have descriptive color variable names and 2:06 the second tier will be the functional variable names. 2:10 Overall I think that will be a pretty maintainable solution for us. 2:13 So because of that, I sometimes use this pretty neat tool called Name that Color 2:17 for generating color variable names. 2:23 And I've posted the link to it in the teacher's notes. 2:25 So back in our variables file, let's first declare the descriptive variables. 2:29 So we're gonna add a comment for that. 2:34 So let's type descriptive color variables. 2:36 So first, let's declare the variable name white. 2:43 And for this, we're going to use the hex value fff. 2:49 Now right below that, let's write another descriptive variable name. 2:53 This time, we'll write black. 2:57 And for this, we're going to use the hex value 000, which is pure black. 3:00 And right below that let's do one more for gray. 3:05 And for gray, we're going to define the hex value #878787. 3:08 So next, instead of typing out the rest of the variables, I'll just go ahead and 3:15 paste them below. 3:20 You can also copy these variable names from the teacher's notes on the page. 3:22 So, right below the ones we just wrote, 3:25 I'm going to paste in the new variable names. 3:27 And, in case you're wondering, 3:30 these were color names generated by that Name that Color tool I just showed you. 3:31 So, next, we're going to create a second set of variables that 3:36 describe a color's function. 3:40 So let's create a comment for that. 3:42 We're going to say functional color variables. 3:44 And for these variables, 3:49 we're going to follow a specific pattern that makes them easier to read. 3:51 So first we're going to define the generic term they all share, so for 3:54 example, color. 3:59 And then we're going to write a more specific description. 4:01 So for example, here let's say color primary, or prim. 4:04 And as the color prime value, we're going to use the yellow-orange variable. 4:11 So let's create one more. 4:18 Let's say color secondary, so let's say color-sec. 4:19 And as the value for color-sec, we're going to define the river-bed variable. 4:23 And we're going to do the same for our text color, so right below the primary and 4:32 secondary colors, let's say color-text and 4:38 then let's find the light text color. 4:42 So we'll say color-text-light and as the value for 4:45 color-text-light we're going to use the white variable. 4:50 All right, so let's do a couple more. 4:55 Let's do color-text-base for our base text color. 4:57 So we'll create a new variable called color-text-base and 5:02 the value for this will be the gray variable. 5:06 And, one more. 5:11 So right below, I'll just paste in the color-text prefix and 5:12 let's say color-text-dark. 5:15 And, for that, we're going to define the river-bed variable. 5:18 So, I'll just go ahead and copy it, paste it as the value. 5:23 So, once again, instead of writing out the rest of the color variables, 5:28 I'm gonna go ahead and paste them below. 5:31 But you can also grab these from the teacher's notes. 5:35 So as you can see here in the second set of variables, 5:38 we can even use color operations for certain color variations. 5:41 Like we did here for the border-light variable and 5:45 the shadow variable, we used an rgba function. 5:49 All right, so 5:53 now we can use these functional variables as color values in our style sheets. 5:54 So, for instance, let's go inside our layout folder and open up our 6:00 header partial and replace some of the hex values with our new variables. 6:04 Now there's a handy shortcut in Workspaces we can use to find and 6:09 replace values with variables. 6:13 And that shortcut is Cmd+Opt+F. 6:15 And for Windows, it's Ctrl+Alt+F. 6:18 And the shortcut should also work in other text editors, like Sublime Text. 6:21 So if, for example, let's say this was a much longer style sheet, we could say, 6:26 we wanna replace this hex value here with one of our variables. 6:30 So you can say replace ffa949 and we'll want 6:35 to replace it with that color-prim variable, that yellow-orange color. 6:39 So we'll say color-prim, and once you hit enter, I'll say yes. 6:43 Yes. 6:50 And as you can see it replaced our hex value with our color-prim variable. 6:51 So next we can also replace this hex value here with one of our variables. 6:57 So let's say color-body, 7:01 which is white, as we can see here in the variables partial. 7:05 All right so let's save our header file. 7:12 Close it out and do a couple more. 7:14 So let's open up our base.scss file. 7:16 And, let's replace the body color hex value with the color-text-base variable. 7:21 So, we'll say, color-text-base. 7:28 So next let's scroll down to the h3 and 7:33 change the color hex value to the variable color-text-dark. 7:36 And let's also scroll down and add variables for our link color values. 7:44 So first let's replace this RGB value here, which is actually just orange. 7:49 With the color-link-default variable, so 7:54 we'll say color-link-default, and right below that, 7:58 we can replace the color lightblue with the color-link-visited variable. 8:03 And finally, in the hover rule, we can keep the RGBA function, but 8:12 let's change these three values to the color-link-default variable, 8:15 and it will still take down the alpha to 0.5. 8:21 So I'm gonna stop here, but you can go ahead and 8:25 finish replacing the rest of the color values in our site with variables, and 8:27 then I'll meet you in the next video. 8:32