1
00:00:00,310 --> 00:00:04,270
So now we're gonna create another set of
variables, this time for our font stacks.

2
00:00:04,270 --> 00:00:08,360
And we'll follow the same naming pattern
we used for our colors.

3
00:00:08,360 --> 00:00:13,000
So, in our variables.scss partial, let's
scroll down, and

4
00:00:13,000 --> 00:00:17,520
right below the color variables, let's
create a new area for

5
00:00:17,520 --> 00:00:21,380
the font stacks, so I'm gonna add a
comment for font stacks.

6
00:00:22,650 --> 00:00:26,550
So first we're going to write the generic
term,

7
00:00:26,550 --> 00:00:31,250
our font stacks share, which is font
stack, or stack.

8
00:00:31,250 --> 00:00:35,640
Let's just say stack, and then we're going
to write the more specific description.

9
00:00:35,640 --> 00:00:40,500
So here with this variable, let's describe
a sans-serif font stack

10
00:00:40,500 --> 00:00:43,637
by typing sans-serif.

11
00:00:43,637 --> 00:00:48,637
[SOUND] And as the value for this
variable, we can actually go

12
00:00:48,637 --> 00:00:53,737
over to our base partial, and copy this
Helvetica, Arial,

13
00:00:53,737 --> 00:01:00,547
sans-serif stack from our body rule, and
paste it in as the variable's value.

14
00:01:00,547 --> 00:01:05,537
So next, let's create another font stack
variable, so we'll write the generic

15
00:01:05,537 --> 00:01:10,330
term first, so stack and this variable
will describe a Helvetica font stack.

16
00:01:10,330 --> 00:01:12,615
So let's say stack Helvetica.

17
00:01:12,615 --> 00:01:20,897
[SOUND] And the value for this will be the
Helvetica Neue stack in the body rule.

18
00:01:20,897 --> 00:01:24,500
So I'm gonna copy the entire font stack
this time.

19
00:01:25,550 --> 00:01:29,850
And paste it in as the stack Helvetica
value.

20
00:01:29,850 --> 00:01:34,630
But this time, instead of having the
sans-serif stack written out,

21
00:01:34,630 --> 00:01:40,570
I can just delete it and we can now
replace it with or sans-serif variable.

22
00:01:40,570 --> 00:01:41,850
All right.
Let's do one more.

23
00:01:41,850 --> 00:01:45,405
Let's create a variable called stack,
abolition for

24
00:01:45,405 --> 00:01:49,507
our Abolition fonts used on the main
headline, and in our h2.

25
00:01:49,507 --> 00:01:52,387
So we'll say stack-abolition.

26
00:01:52,387 --> 00:01:57,733
[SOUND] And as the stack-abolition value,
[SOUND] let's first

27
00:01:57,733 --> 00:02:04,003
include the [SOUND] Abolition Regular font
family, followed by a comma,

28
00:02:04,003 --> 00:02:10,202
and then we'll want to include the
sans-serif font stack after that.

29
00:02:10,202 --> 00:02:12,930
All right, so we're done with our font
stack variables.

30
00:02:12,930 --> 00:02:17,250
And again, if you want, you can do a two
tier variable structure for these, and

31
00:02:17,250 --> 00:02:19,790
that will work great on larger projects,
and in fact,

32
00:02:19,790 --> 00:02:24,660
you'll see some of the benefits of doing
that in the modular CSS with Sass course.

33
00:02:24,660 --> 00:02:28,680
But we'll go ahead and stick with these
variables moving forward.

34
00:02:28,680 --> 00:02:31,760
And for an extensive reference on font
stack variables,

35
00:02:31,760 --> 00:02:32,980
take a look at the teacher's notes.

36
00:02:32,980 --> 00:02:35,330
I've posted a link on that.

37
00:02:35,330 --> 00:02:39,710
So now, let's begin replacing the font
stacks in our base partial

38
00:02:39,710 --> 00:02:40,800
with our new variables.

39
00:02:40,800 --> 00:02:46,160
So first, in our body rule, we can replace
the Helvetica Neue

40
00:02:46,160 --> 00:02:50,061
stack with the stack-helvetica variable.

41
00:02:50,061 --> 00:02:54,427
[SOUND] So I'm just gonna select the
entire font stack, delete it and

42
00:02:54,427 --> 00:02:56,198
paste in our new variable.

43
00:02:56,198 --> 00:03:01,590
Then right below that, let's get rid of
the Abolition Regular stack.

44
00:03:01,590 --> 00:03:05,940
And we'll go back to the variables partial
and copy this variable and

45
00:03:05,940 --> 00:03:08,260
paste it in as the new font family value.

46
00:03:09,740 --> 00:03:14,115
So, next, since we're repeating this 10
pixel

47
00:03:14,115 --> 00:03:17,700
border-radius value several times in our
stylesheets.

48
00:03:17,700 --> 00:03:19,620
Let's also create a variable for this.

49
00:03:19,620 --> 00:03:24,860
So back in our variables partial, below
the font stack variables,

50
00:03:24,860 --> 00:03:28,900
let's create a new section for Border
radius.

51
00:03:29,980 --> 00:03:33,575
So we could also probably name our
variables something like

52
00:03:33,575 --> 00:03:37,480
br-main or br image.

53
00:03:37,480 --> 00:03:39,260
Maybe br content.

54
00:03:39,260 --> 00:03:42,080
Or we can say radius main.

55
00:03:42,080 --> 00:03:48,680
And that's fine, but let's just stick with
the variable br for this project.

56
00:03:48,680 --> 00:03:52,240
And as a value, we'll type 10 pixels.

57
00:03:52,240 --> 00:03:57,110
So now we can use this br variable in
place of the repeated value.

58
00:03:57,110 --> 00:04:00,850
So for instance, let's go to our base
style.

59
00:04:00,850 --> 00:04:02,770
We'll first save our variables partial.

60
00:04:02,770 --> 00:04:06,510
And in our base style, we'll find the
image rule and

61
00:04:06,510 --> 00:04:09,470
replace the 10 pixel value with our new
variable.

62
00:04:11,240 --> 00:04:14,650
So next, let's go inside our layout
directory and

63
00:04:14,650 --> 00:04:17,680
bring up the containers partial.

64
00:04:17,680 --> 00:04:21,770
And scroll down, and as we'll see here in
the wildlife rule, we have a border

65
00:04:21,770 --> 00:04:26,740
radius declaration, so let's replace the
value here as well with our variable.

66
00:04:26,740 --> 00:04:27,650
And finally,

67
00:04:27,650 --> 00:04:33,220
let's also define a variable that sets the
path to some of our project assets.

68
00:04:33,220 --> 00:04:35,157
So let's start with images.

69
00:04:35,157 --> 00:04:42,277
So below the Border radius variable, let's
create a new comment for new Asset paths.

70
00:04:42,277 --> 00:04:47,275
[SOUND] So we're gonna call our image path
variable

71
00:04:47,275 --> 00:04:51,202
path dash image, [SOUND] and as a value,

72
00:04:51,202 --> 00:04:57,762
we're going to define the relative path to
the image directory.

73
00:04:57,762 --> 00:05:03,896
[SOUND] All right, so let's go ahead and
save our variables partial,

74
00:05:03,896 --> 00:05:08,444
and now we'll go inside our layout
directory, and

75
00:05:08,444 --> 00:05:12,806
we're gonna bring up the header.css
partial.

76
00:05:12,806 --> 00:05:16,527
And we're gonna replace the main
background image path here,

77
00:05:16,527 --> 00:05:18,860
with our new variable.

78
00:05:18,860 --> 00:05:23,780
Now since our image path value is a
string, we'll need to use what's

79
00:05:23,780 --> 00:05:28,670
called interpolation to pass the variable
in this value.

80
00:05:29,950 --> 00:05:35,600
So first, let's select and delete the
hardcoded path.

81
00:05:35,600 --> 00:05:37,101
And the syntax for

82
00:05:37,101 --> 00:05:42,818
interpolation consists of a hash followed
by a set of curly braces.

83
00:05:42,818 --> 00:05:48,805
And inside the curly braces is where we
write the variable we wanna pass,

84
00:05:48,805 --> 00:05:51,958
which in this case is path dash image.

85
00:05:51,958 --> 00:05:56,688
All right, so now we can go ahead and save
our header partial, close it out, and

86
00:05:56,688 --> 00:06:01,430
there's one more image value we need to
take care of in our wildlife container.

87
00:06:01,430 --> 00:06:06,980
So let's open up the containers partial
and scroll down to the wildlife rule.

88
00:06:06,980 --> 00:06:09,910
And as you can see here in the background
value,

89
00:06:09,910 --> 00:06:13,260
we're going to replace the image path with
our variable.

90
00:06:13,260 --> 00:06:18,410
And once again, we're going to interpolate
the variable by typing hash, curly braces,

91
00:06:18,410 --> 00:06:23,790
then inside the curly braces, the name of
the variable, just path dash image.

92
00:06:23,790 --> 00:06:25,560
All right, so let's save our file.

93
00:06:26,560 --> 00:06:31,000
Bring up the preview, refresh, and
everything still looks good.

94
00:06:31,000 --> 00:06:33,080
All our images are showing up.

95
00:06:33,080 --> 00:06:36,840
So now if the path to our images ever
changes,

96
00:06:36,840 --> 00:06:39,900
we only need to change it in the one
variable here.

97
00:06:39,900 --> 00:06:43,570
Instead of digging through our
stylesheets, replacing them one by one.