Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up