1
00:00:00,420 --> 00:00:02,670
CSS can be immensely repetitive.

2
00:00:02,670 --> 00:00:04,550
And maintaining it can be cumbersome.

3
00:00:04,550 --> 00:00:08,190
For instance, how many times have
you reused a color, a list of fonts,

4
00:00:08,190 --> 00:00:10,140
or a link value in your style sheet?

5
00:00:10,140 --> 00:00:12,200
Then later, due to a design change or

6
00:00:12,200 --> 00:00:15,330
client request, had to spend
valuable time changing each value.

7
00:00:16,340 --> 00:00:19,480
Sass borrows certain concepts and
features from programming languages to

8
00:00:19,480 --> 00:00:23,660
make your style sheets less repetitive,
faster to write and easier to maintain.

9
00:00:23,660 --> 00:00:26,370
So let's start with a core
feature of sass, variables.

10
00:00:27,390 --> 00:00:30,460
Variables are one of the most
important concepts in programming.

11
00:00:30,460 --> 00:00:33,600
They provide a way of storing and
keeping track of information.

12
00:00:33,600 --> 00:00:35,030
When you create variables in sass,

13
00:00:35,030 --> 00:00:37,960
you store values that you've referenced
throughout your style sheets.

14
00:00:37,960 --> 00:00:40,380
For example, if you use the same color for

15
00:00:40,380 --> 00:00:44,680
a font, a background, and a border, you
can declare a variable for that color and

16
00:00:44,680 --> 00:00:47,180
reference that variable
anywhere you use that color.

17
00:00:47,180 --> 00:00:47,988
Let me show you how.

18
00:00:47,988 --> 00:00:51,390
In the style.scss file,

19
00:00:51,390 --> 00:00:56,480
let's use a variable to store this
hex color value in the card h1 rule.

20
00:00:56,480 --> 00:01:00,240
If you hover over it in workspaces,
you'll see that it's a shade of teal.

21
00:01:00,240 --> 00:01:03,475
This color is going to be
repeated several times in our

22
00:01:03,475 --> 00:01:08,440
project to style important elements
like headings, icons, buttons and more.

23
00:01:09,440 --> 00:01:12,980
Variables in sass are declared
using the dollar sign.

24
00:01:12,980 --> 00:01:19,800
So at the very top of the file, type
a dollar sign to create a new variable,

25
00:01:19,800 --> 00:01:23,400
and right next to the dollar sign with
no space, you write the variable name.

26
00:01:23,400 --> 00:01:25,120
Which can be any name you want.

27
00:01:25,120 --> 00:01:28,820
It's helpful to use a name that clearly
describes the variable's purpose.

28
00:01:28,820 --> 00:01:31,511
For example, this color will
represent the brand color, or

29
00:01:31,511 --> 00:01:33,217
main color used throughout the site.

30
00:01:33,217 --> 00:01:38,944
So we'll name the variable color-primary.

31
00:01:38,944 --> 00:01:45,139
And assign it the hex value, #278da4.

32
00:01:46,930 --> 00:01:51,780
Now let's replace each of the teal hex
value with the new color-primary variable.

33
00:01:51,780 --> 00:01:55,900
So I'll simply copy it then
scroll down to the card h1 rule.

34
00:01:56,950 --> 00:02:02,124
Replace the color value with
color-primary, then right below

35
00:02:02,124 --> 00:02:07,312
place btn-info's background-color
with color-primary.

36
00:02:07,312 --> 00:02:12,411
Give style.scss a save, and
over in style.css you'll

37
00:02:12,411 --> 00:02:19,750
see that says output the value 278da4,
wherever we use the color-primary.

38
00:02:19,750 --> 00:02:22,050
So in card h1 and btn-info.

39
00:02:24,140 --> 00:02:28,060
Now the variable declaration itself and
other variable references will never

40
00:02:28,060 --> 00:02:32,440
appear in the CSS output
because it isn't valid CSS.

41
00:02:32,440 --> 00:02:36,218
Now back inside style.scss,
at the very top,

42
00:02:36,218 --> 00:02:41,232
let's create variables for
our secondary and accent colors.

43
00:02:41,232 --> 00:02:46,134
Right below color-primary, we'll create

44
00:02:46,134 --> 00:02:51,165
a new variable called color-secondary, and

45
00:02:51,165 --> 00:02:55,812
we'll assign it the value #b13c69.

46
00:02:55,812 --> 00:03:01,428
Below that we create
a variable color-accent and

47
00:03:01,428 --> 00:03:05,580
give it the hex value, #eeea72.

48
00:03:06,970 --> 00:03:12,590
We'll use the color-secondary variable in
a later video when we style our buttons,

49
00:03:12,590 --> 00:03:15,740
but let's use
the color-accent variable now

50
00:03:15,740 --> 00:03:18,780
to set the header paragraph's color value.

51
00:03:18,780 --> 00:03:21,639
So I'll scroll down to the header p rule.

52
00:03:24,857 --> 00:03:28,990
Add a color property and
set it to color-accent.

53
00:03:28,990 --> 00:03:32,490
Now variables aren't just for colors,
it's common to create variables for

54
00:03:32,490 --> 00:03:35,430
storing lists of fonts called font stacks.

55
00:03:35,430 --> 00:03:39,750
So up here in our variables,
let's create two font stack variables.

56
00:03:39,750 --> 00:03:43,470
We'll name the first
one font-stack primary.

57
00:03:46,764 --> 00:03:51,922
And set it to Raleway,

58
00:03:51,922 --> 00:03:55,480
sans-serif.

59
00:03:55,480 --> 00:03:58,969
Right below we'll create the variable,
font-stack secondary

60
00:04:05,296 --> 00:04:12,390
And set it to Bree Serif, serif.

61
00:04:12,390 --> 00:04:16,205
Now you may also see font-stack
variable names like font-stack sans or

62
00:04:16,205 --> 00:04:17,737
font-stack serif.

63
00:04:17,737 --> 00:04:20,770
But I'll stick to this primary,
secondary to this project.

64
00:04:20,770 --> 00:04:26,840
Now I'll set the bodies, font-family, to
font-stack-primary here in the body rule.

65
00:04:28,150 --> 00:04:32,664
By replacing the font-family
value with font-stack-primary.

66
00:04:32,664 --> 00:04:35,997
Then right below in the h1 and
h2 rule here,

67
00:04:35,997 --> 00:04:40,753
I'll set the font-family value
to font-stack-secondary.

68
00:04:43,409 --> 00:04:47,344
So sass variables make the repetitive
nature of CSS easier to manage, and

69
00:04:47,344 --> 00:04:51,024
let you change property values in
one place without having to find and

70
00:04:51,024 --> 00:04:54,290
replace them across multiple files and
directories.

71
00:04:54,290 --> 00:04:59,850
So for example, if you're not to really
feeling the color teal as your heading and

72
00:04:59,850 --> 00:05:01,785
button background colors,

73
00:05:01,785 --> 00:05:06,229
simply change the value of
color-primary to a different color.

74
00:05:06,229 --> 00:05:09,790
And you'll see the color
values change all at once.

75
00:05:11,820 --> 00:05:14,460
Now I'm usually cool with tomato but
not in this case.

76
00:05:14,460 --> 00:05:17,550
So I'll go ahead and
change it back to the teal color.

77
00:05:19,160 --> 00:05:21,903
Variables are one of the core
sass features you'll use most.

78
00:05:21,903 --> 00:05:24,831
So in the next video,
I'll teach you a few best practices for

79
00:05:24,831 --> 00:05:26,504
creating variable names in sass.