Providing Fallbacks and Building Length Values

The var function also accepts an optional second argument that acts as 0:00 a fall back value. 0:04 In the project files for this video, the class button has a font size color and 0:06 background color properties set using variables. 0:11 Now these three variables are not declared in the start feed. 0:14 So to learn more buttons inside the cards appear unstyled. 0:17 In the case where a variable is not declared anywhere, or 0:21 if the referenced variable is invalid, 0:25 the second argument past the var is used as a substitution value for the variable. 0:27 So first I'll set a fall back for 0:32 the btn-font-size variable by adding a comma after the variable. 0:33 And I'll set it to 0.85em. 0:38 Then for --btn-color, I'll provide 0:41 a fall back value of #fff, or white, and 0:46 I'll set the background-color by providing 0:51 --btn-bg a fall back value of #60a4b3. 0:56 Providing fall back values let's you write defensive styles for 1:02 your elements and can also make your style sheets sharable and extensible. 1:05 For example, you can create an initial design using var and fall back values. 1:09 The fall back values set the initial styles and the custom properties provide 1:14 theming hooks, you or another developer can use to change the design. 1:19 You can also do simple calculations using CSS variables. 1:24 A handy use case is using the CSS calc function 1:28 to perform calculations that determine your length values. 1:32 Now if you've never worked with calc before, 1:36 I posted a link to a treehouse workshop about calc in the teacher's notes. 1:38 So let's combine calc with CSS variables to build up margin values for 1:41 the nav list items and the header. 1:47 I'll start by creating a variable named spacing and 1:50 assigning it the value 2. 1:56 Now I'll set main-nav li's margin value to 0 calc. 2:03 And between the parentheses, I'll multiple the spacing value of 2 by 10 pixels, 2:10 and this is going to set the left and right margin values to 20 pixels. 2:18 Then up in the header rule, 2:24 I'll multiply the spacing value by 1em to set the margin bottom value. 2:25 So first I'll specify calc, then I'll pass calc the spacing 2:30 variable with var spacing, and multiply that by 1em. 2:36 And this is going to give us a margin bottom value of 2em. 2:41 You're not limited to just pixels or units, 2:48 you can use all valid units that are available in CSS, right? 2:51 So up next, you'll learn to update SVG attributes with CSS variables 2:55