1
00:00:00,710 --> 00:00:04,368
The var function also accepts
an optional second argument that acts as

2
00:00:04,368 --> 00:00:06,080
a fall back value.

3
00:00:06,080 --> 00:00:11,900
In the project files for this video,
the class button has a font size color and

4
00:00:11,900 --> 00:00:14,320
background color properties
set using variables.

5
00:00:14,320 --> 00:00:17,430
Now these three variables are not
declared in the start feed.

6
00:00:17,430 --> 00:00:21,730
So to learn more buttons inside
the cards appear unstyled.

7
00:00:21,730 --> 00:00:25,070
In the case where a variable
is not declared anywhere, or

8
00:00:25,070 --> 00:00:27,230
if the referenced variable is invalid,

9
00:00:27,230 --> 00:00:32,300
the second argument past the var is used
as a substitution value for the variable.

10
00:00:32,300 --> 00:00:33,760
So first I'll set a fall back for

11
00:00:33,760 --> 00:00:38,860
the btn-font-size variable by
adding a comma after the variable.

12
00:00:38,860 --> 00:00:41,968
And I'll set it to 0.85em.

13
00:00:41,968 --> 00:00:46,534
Then for --btn-color, I'll provide

14
00:00:46,534 --> 00:00:51,099
a fall back value of #fff, or white, and

15
00:00:51,099 --> 00:00:56,186
I'll set the background-color by providing

16
00:00:56,186 --> 00:01:01,543
--btn-bg a fall back value of #60a4b3.

17
00:01:02,640 --> 00:01:05,693
Providing fall back values let's
you write defensive styles for

18
00:01:05,693 --> 00:01:09,258
your elements and can also make your
style sheets sharable and extensible.

19
00:01:09,258 --> 00:01:14,798
For example, you can create an initial
design using var and fall back values.

20
00:01:14,798 --> 00:01:19,615
The fall back values set the initial
styles and the custom properties provide

21
00:01:19,615 --> 00:01:24,079
theming hooks, you or another developer
can use to change the design.

22
00:01:24,079 --> 00:01:28,650
You can also do simple
calculations using CSS variables.

23
00:01:28,650 --> 00:01:32,790
A handy use case is using
the CSS calc function

24
00:01:32,790 --> 00:01:36,090
to perform calculations that
determine your length values.

25
00:01:36,090 --> 00:01:38,242
Now if you've never
worked with calc before,

26
00:01:38,242 --> 00:01:41,730
I posted a link to a treehouse workshop
about calc in the teacher's notes.

27
00:01:41,730 --> 00:01:47,394
So let's combine calc with CSS
variables to build up margin values for

28
00:01:47,394 --> 00:01:50,910
the nav list items and the header.

29
00:01:50,910 --> 00:01:56,429
I'll start by creating
a variable named spacing and

30
00:01:56,429 --> 00:01:59,320
assigning it the value 2.

31
00:02:03,882 --> 00:02:10,300
Now I'll set main-nav li's
margin value to 0 calc.

32
00:02:10,300 --> 00:02:17,580
And between the parentheses, I'll multiple
the spacing value of 2 by 10 pixels,

33
00:02:18,780 --> 00:02:22,980
and this is going to set the left and
right margin values to 20 pixels.

34
00:02:24,080 --> 00:02:25,740
Then up in the header rule,

35
00:02:25,740 --> 00:02:30,850
I'll multiply the spacing value by
1em to set the margin bottom value.

36
00:02:30,850 --> 00:02:36,572
So first I'll specify calc,
then I'll pass calc the spacing

37
00:02:36,572 --> 00:02:41,757
variable with var spacing,
and multiply that by 1em.

38
00:02:41,757 --> 00:02:46,110
And this is going to give us
a margin bottom value of 2em.

39
00:02:48,420 --> 00:02:51,580
You're not limited to just pixels or
units,

40
00:02:51,580 --> 00:02:55,240
you can use all valid units that
are available in CSS, right?

41
00:02:55,240 --> 00:02:59,300
So up next, you'll learn to update
SVG attributes with CSS variables