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