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