So now we're gonna create another set of variables, this time for our font stacks.

And we'll follow the same naming pattern we used for our colors.

So, in our variables.scss partial, let's scroll down, and

right below the color variables, let's create a new area for

the font stacks, so I'm gonna add a comment for font stacks.

So first we're going to write the generic term,

our font stacks share, which is font stack, or stack.

Let's just say stack, and then we're going to write the more specific description.

So here with this variable, let's describe a sans-serif font stack

by typing sans-serif.

[SOUND] And as the value for this variable, we can actually go

over to our base partial, and copy this Helvetica, Arial,

sans-serif stack from our body rule, and paste it in as the variable's value.

So next, let's create another font stack variable, so we'll write the generic

term first, so stack and this variable will describe a Helvetica font stack.

So let's say stack Helvetica.

[SOUND] And the value for this will be the Helvetica Neue stack in the body rule.

So I'm gonna copy the entire font stack this time.

And paste it in as the stack Helvetica value.

But this time, instead of having the sans-serif stack written out,

I can just delete it and we can now replace it with or sans-serif variable.

All right. Let's do one more.

Let's create a variable called stack, abolition for

our Abolition fonts used on the main headline, and in our h2.

So we'll say stack-abolition.

[SOUND] And as the stack-abolition value, [SOUND] let's first

include the [SOUND] Abolition Regular font family, followed by a comma,

and then we'll want to include the sans-serif font stack after that.

All right, so we're done with our font stack variables.

And again, if you want, you can do a two tier variable structure for these, and

that will work great on larger projects, and in fact,

you'll see some of the benefits of doing that in the modular CSS with Sass course.

But we'll go ahead and stick with these variables moving forward.

And for an extensive reference on font stack variables,

take a look at the teacher's notes.

I've posted a link on that.

So now, let's begin replacing the font stacks in our base partial

with our new variables.

So first, in our body rule, we can replace the Helvetica Neue

stack with the stack-helvetica variable.

[SOUND] So I'm just gonna select the entire font stack, delete it and

paste in our new variable.

Then right below that, let's get rid of the Abolition Regular stack.

And we'll go back to the variables partial and copy this variable and

paste it in as the new font family value.

So, next, since we're repeating this 10 pixel

border-radius value several times in our stylesheets.

Let's also create a variable for this.

So back in our variables partial, below the font stack variables,

let's create a new section for Border radius.

So we could also probably name our variables something like

br-main or br image.

Maybe br content.

Or we can say radius main.

And that's fine, but let's just stick with the variable br for this project.

And as a value, we'll type 10 pixels.

So now we can use this br variable in place of the repeated value.

So for instance, let's go to our base style.

We'll first save our variables partial.

And in our base style, we'll find the image rule and

replace the 10 pixel value with our new variable.

So next, let's go inside our layout directory and

bring up the containers partial.

And scroll down, and as we'll see here in the wildlife rule, we have a border

radius declaration, so let's replace the value here as well with our variable.

And finally,

let's also define a variable that sets the path to some of our project assets.

So let's start with images.

So below the Border radius variable, let's create a new comment for new Asset paths.

[SOUND] So we're gonna call our image path variable

path dash image, [SOUND] and as a value,

we're going to define the relative path to the image directory.

[SOUND] All right, so let's go ahead and save our variables partial,

and now we'll go inside our layout directory, and

we're gonna bring up the header.css partial.

And we're gonna replace the main background image path here,

with our new variable.

Now since our image path value is a string, we'll need to use what's

called interpolation to pass the variable in this value.

So first, let's select and delete the hardcoded path.

And the syntax for

interpolation consists of a hash followed by a set of curly braces.

And inside the curly braces is where we write the variable we wanna pass,

which in this case is path dash image.

All right, so now we can go ahead and save our header partial, close it out, and

there's one more image value we need to take care of in our wildlife container.

So let's open up the containers partial and scroll down to the wildlife rule.

And as you can see here in the background value,

we're going to replace the image path with our variable.

And once again, we're going to interpolate the variable by typing hash, curly braces,

then inside the curly braces, the name of the variable, just path dash image.

All right, so let's save our file.

Bring up the preview, refresh, and everything still looks good.

All our images are showing up.

So now if the path to our images ever changes,

we only need to change it in the one variable here.

Instead of digging through our stylesheets, replacing them one by one.