Font Stack and Asset Variables

So now we're gonna create another set of variables, this time for our font stacks. 0:00 And we'll follow the same naming pattern we used for our colors. 0:04 So, in our variables.scss partial, let's scroll down, and 0:08 right below the color variables, let's create a new area for 0:13 the font stacks, so I'm gonna add a comment for font stacks. 0:17 So first we're going to write the generic term, 0:22 our font stacks share, which is font stack, or stack. 0:26 Let's just say stack, and then we're going to write the more specific description. 0:31 So here with this variable, let's describe a sans-serif font stack 0:35 by typing sans-serif. 0:40 [SOUND] And as the value for this variable, we can actually go 0:43 over to our base partial, and copy this Helvetica, Arial, 0:48 sans-serif stack from our body rule, and paste it in as the variable's value. 0:53 So next, let's create another font stack variable, so we'll write the generic 1:00 term first, so stack and this variable will describe a Helvetica font stack. 1:05 So let's say stack Helvetica. 1:10 [SOUND] And the value for this will be the Helvetica Neue stack in the body rule. 1:12 So I'm gonna copy the entire font stack this time. 1:20 And paste it in as the stack Helvetica value. 1:25 But this time, instead of having the sans-serif stack written out, 1:29 I can just delete it and we can now replace it with or sans-serif variable. 1:34 All right. Let's do one more. 1:40 Let's create a variable called stack, abolition for 1:41 our Abolition fonts used on the main headline, and in our h2. 1:45 So we'll say stack-abolition. 1:49 [SOUND] And as the stack-abolition value, [SOUND] let's first 1:52 include the [SOUND] Abolition Regular font family, followed by a comma, 1:57 and then we'll want to include the sans-serif font stack after that. 2:04 All right, so we're done with our font stack variables. 2:10 And again, if you want, you can do a two tier variable structure for these, and 2:12 that will work great on larger projects, and in fact, 2:17 you'll see some of the benefits of doing that in the modular CSS with Sass course. 2:19 But we'll go ahead and stick with these variables moving forward. 2:24 And for an extensive reference on font stack variables, 2:28 take a look at the teacher's notes. 2:31 I've posted a link on that. 2:32 So now, let's begin replacing the font stacks in our base partial 2:35 with our new variables. 2:39 So first, in our body rule, we can replace the Helvetica Neue 2:40 stack with the stack-helvetica variable. 2:46 [SOUND] So I'm just gonna select the entire font stack, delete it and 2:50 paste in our new variable. 2:54 Then right below that, let's get rid of the Abolition Regular stack. 2:56 And we'll go back to the variables partial and copy this variable and 3:01 paste it in as the new font family value. 3:05 So, next, since we're repeating this 10 pixel 3:09 border-radius value several times in our stylesheets. 3:14 Let's also create a variable for this. 3:17 So back in our variables partial, below the font stack variables, 3:19 let's create a new section for Border radius. 3:24 So we could also probably name our variables something like 3:29 br-main or br image. 3:33 Maybe br content. 3:37 Or we can say radius main. 3:39 And that's fine, but let's just stick with the variable br for this project. 3:42 And as a value, we'll type 10 pixels. 3:48 So now we can use this br variable in place of the repeated value. 3:52 So for instance, let's go to our base style. 3:57 We'll first save our variables partial. 4:00 And in our base style, we'll find the image rule and 4:02 replace the 10 pixel value with our new variable. 4:06 So next, let's go inside our layout directory and 4:11 bring up the containers partial. 4:14 And scroll down, and as we'll see here in the wildlife rule, we have a border 4:17 radius declaration, so let's replace the value here as well with our variable. 4:21 And finally, 4:26 let's also define a variable that sets the path to some of our project assets. 4:27 So let's start with images. 4:33 So below the Border radius variable, let's create a new comment for new Asset paths. 4:35 [SOUND] So we're gonna call our image path variable 4:42 path dash image, [SOUND] and as a value, 4:47 we're going to define the relative path to the image directory. 4:51 [SOUND] All right, so let's go ahead and save our variables partial, 4:57 and now we'll go inside our layout directory, and 5:03 we're gonna bring up the header.css partial. 5:08 And we're gonna replace the main background image path here, 5:12 with our new variable. 5:16 Now since our image path value is a string, we'll need to use what's 5:18 called interpolation to pass the variable in this value. 5:23 So first, let's select and delete the hardcoded path. 5:29 And the syntax for 5:35 interpolation consists of a hash followed by a set of curly braces. 5:37 And inside the curly braces is where we write the variable we wanna pass, 5:42 which in this case is path dash image. 5:48 All right, so now we can go ahead and save our header partial, close it out, and 5:51 there's one more image value we need to take care of in our wildlife container. 5:56 So let's open up the containers partial and scroll down to the wildlife rule. 6:01 And as you can see here in the background value, 6:06 we're going to replace the image path with our variable. 6:09 And once again, we're going to interpolate the variable by typing hash, curly braces, 6:13 then inside the curly braces, the name of the variable, just path dash image. 6:18 All right, so let's save our file. 6:23 Bring up the preview, refresh, and everything still looks good. 6:26 All our images are showing up. 6:31 So now if the path to our images ever changes, 6:33 we only need to change it in the one variable here. 6:36 Instead of digging through our stylesheets, replacing them one by one. 6:39