1
00:00:00,150 --> 00:00:03,010
In the previous video you learned
that a variable name should clearly

2
00:00:03,010 --> 00:00:05,450
describe the variable's purpose or
function.

3
00:00:05,450 --> 00:00:09,430
For example, the name font-stack-primary
clearly communicates that it

4
00:00:09,430 --> 00:00:12,465
holds the value of your
site's primary font stack and

5
00:00:12,465 --> 00:00:15,710
color-primary represents
the main color of the site.

6
00:00:15,710 --> 00:00:19,220
By giving variables meaningful
names you'll avoid introducing

7
00:00:19,220 --> 00:00:21,530
unnecessary complexity
in your style sheets.

8
00:00:21,530 --> 00:00:26,580
For instance, say you named this
variable teal instead of color-primary.

9
00:00:26,580 --> 00:00:30,210
Well, teal doesn't reflect
the purpose of this color.

10
00:00:30,210 --> 00:00:33,880
What if the branding needs to change,
and that teal needs to be dark blue?

11
00:00:33,880 --> 00:00:38,820
Well, you could change the value of the
teal variable to a dark blue color value,

12
00:00:38,820 --> 00:00:41,030
but that will be pretty confusing.

13
00:00:41,030 --> 00:00:44,090
Then you and your fellow developers
will need to remember that wherever

14
00:00:44,090 --> 00:00:47,170
teal is used really means dark blue.

15
00:00:47,170 --> 00:00:48,860
Multiply that problem by tens or

16
00:00:48,860 --> 00:00:52,030
hundreds of variable names that
describe what a variable looks like

17
00:00:52,030 --> 00:00:55,730
instead of its purpose and you lose one
of the biggest benefits of variables.

18
00:00:55,730 --> 00:01:00,520
Using descriptive variable names makes
your style sheet super flexible.

19
00:01:00,520 --> 00:01:03,890
You can change the value of
color primary to any color and

20
00:01:03,890 --> 00:01:06,580
it will always communicate
the same meaning.

21
00:01:06,580 --> 00:01:11,770
Now there are some use cases
represent the actual color value for

22
00:01:11,770 --> 00:01:15,380
instance if your project uses
the color white in several places.

23
00:01:15,380 --> 00:01:19,540
You can store in a variable using
a descriptive name like white.

24
00:01:22,300 --> 00:01:25,420
Currently the page's main heading and

25
00:01:25,420 --> 00:01:29,040
learn more buttons have their
text color set to white.

26
00:01:29,040 --> 00:01:32,180
So let's replace the hex
values with our new variable.

27
00:01:34,081 --> 00:01:40,250
So in the header h1 rule,
we'll replace the color value, With white.

28
00:01:41,760 --> 00:01:45,990
And scroll down to
the button info rule and

29
00:01:45,990 --> 00:01:49,100
replace its color value
with our white variable.

30
00:01:56,064 --> 00:01:59,078
I've posted links to resources and
videos about when and

31
00:01:59,078 --> 00:02:02,360
how to use descriptive variable
names in the teachers notes.

32
00:02:03,420 --> 00:02:07,580
If your variable name uses two or
more words, for example color or

33
00:02:07,580 --> 00:02:11,600
primary or font stack secondary,
it's recommended that you

34
00:02:11,600 --> 00:02:15,440
follow the hyphenated convention CSS
uses for property names and values.

35
00:02:15,440 --> 00:02:19,390
So that means it's best to
avoid using underscores and

36
00:02:19,390 --> 00:02:21,420
camel case to separate words.

37
00:02:21,420 --> 00:02:24,470
Following this convention will make
your style sheets easier to read.

38
00:02:26,010 --> 00:02:30,567
Finally let's create four more variables
that store common colors on our site.

39
00:02:30,567 --> 00:02:35,104
So right below the color accent variable

40
00:02:35,104 --> 00:02:40,043
we'll create the variable color-shade,

41
00:02:40,043 --> 00:02:45,654
set it to #ee which gives
us a light shade of gray.

42
00:02:45,654 --> 00:02:49,280
And right below we'll create
the variable Color-text.

43
00:02:49,280 --> 00:02:53,950
Set this one to #343434,

44
00:02:53,950 --> 00:03:00,090
then create the variable color-bg.

45
00:03:00,090 --> 00:03:05,400
Set it to #3acec2.

46
00:03:05,400 --> 00:03:09,777
And finally right below
color-bg we'll creat

47
00:03:09,777 --> 00:03:15,380
color-bg-light and
we'll set this one to pound 009fe1.

48
00:03:21,040 --> 00:03:26,710
We'll use the color-text variable
as the body text Color value.

49
00:03:28,620 --> 00:03:33,150
Then use the $color-bg and
$color-bg-light variables and

50
00:03:33,150 --> 00:03:35,670
the header gradients color values.

51
00:03:35,670 --> 00:03:39,340
And we'll use the color shade variable,
for

52
00:03:39,340 --> 00:03:43,110
the light grey rounded borders and
the footer background colors.

53
00:03:44,240 --> 00:03:47,730
So next why don't you practice
using variables on your own

54
00:03:47,730 --> 00:03:51,610
by replacing the color values in the style
sheet with their corresponding variables.

55
00:03:52,640 --> 00:03:55,790
There is a handy shortcut in
workspaces you can use to find and

56
00:03:55,790 --> 00:03:57,750
replace values with variables.

57
00:03:57,750 --> 00:04:02,790
Press Cmd+Option+F on a Mac, or
Ctrl+Alt+F on a Windows machine.

58
00:04:03,800 --> 00:04:08,220
Type the value to replace, and

59
00:04:08,220 --> 00:04:14,900
the variable that will replace it, then
choose which values you'd like to replace.

60
00:04:18,590 --> 00:04:22,980
This short cut also works in popular
text editors like Adam and Sublime Text.

61
00:04:22,980 --> 00:04:26,220
And you can see how I replace the values
when you download the project files and

62
00:04:26,220 --> 00:04:28,600
open the directory for this video.

63
00:04:28,600 --> 00:04:32,520
In this stage you learn that
Sass is an extension of CSS that

64
00:04:32,520 --> 00:04:34,970
gives your style sheets
enhanced functionality.

65
00:04:34,970 --> 00:04:38,910
And the tool itself is a preprocessor
that translate Sass or

66
00:04:38,910 --> 00:04:41,700
SCSS syntax into plain CSS.

67
00:04:41,700 --> 00:04:46,170
You learned to use the SAS command and
watch option for compiling your SAS to CSS

68
00:04:46,170 --> 00:04:50,040
and we studied how variables work in Sass
along with best practices for using them.

69
00:04:51,130 --> 00:04:53,580
We're just getting started using SAS.

70
00:04:53,580 --> 00:04:56,850
In the next stage, we'll explore
features that let you nest selectors and

71
00:04:56,850 --> 00:04:59,960
reference parent's selectors
inside nested rules.

72
00:04:59,960 --> 00:05:02,900
You'll learn to make your CSS
cleaner unless repetitive with

73
00:05:02,900 --> 00:05:05,500
reusable chunks of code
called the mix-ins and

74
00:05:05,500 --> 00:05:08,890
how to allow a selector to inherit
the properties of another selector.

75
00:05:08,890 --> 00:05:09,390
See you soon