Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Providing Fallbacks and Building Length Values

3:00 with Guil Hernandez

var() accepts an optional second argument that acts as a fallback value. In the case where a custom property isn't declared anywhere, or if the referenced custom property is invalid, the second argument is used as a substitution value for that property. You can also do simple calculations using CSS variables and calc().

Resources

  • 0:00

    The var function also accepts an optional second argument that acts as

  • 0:04

    a fall back value.

  • 0:06

    In the project files for this video, the class button has a font size color and

  • 0:11

    background color properties set using variables.

  • 0:14

    Now these three variables are not declared in the start feed.

  • 0:17

    So to learn more buttons inside the cards appear unstyled.

  • 0:21

    In the case where a variable is not declared anywhere, or

  • 0:25

    if the referenced variable is invalid,

  • 0:27

    the second argument past the var is used as a substitution value for the variable.

  • 0:32

    So first I'll set a fall back for

  • 0:33

    the btn-font-size variable by adding a comma after the variable.

  • 0:38

    And I'll set it to 0.85em.

  • 0:41

    Then for --btn-color, I'll provide

  • 0:46

    a fall back value of #fff, or white, and

  • 0:51

    I'll set the background-color by providing

  • 0:56

    --btn-bg a fall back value of #60a4b3.

  • 1:02

    Providing fall back values let's you write defensive styles for

  • 1:05

    your elements and can also make your style sheets sharable and extensible.

  • 1:09

    For example, you can create an initial design using var and fall back values.

  • 1:14

    The fall back values set the initial styles and the custom properties provide

  • 1:19

    theming hooks, you or another developer can use to change the design.

  • 1:24

    You can also do simple calculations using CSS variables.

  • 1:28

    A handy use case is using the CSS calc function

  • 1:32

    to perform calculations that determine your length values.

  • 1:36

    Now if you've never worked with calc before,

  • 1:38

    I posted a link to a treehouse workshop about calc in the teacher's notes.

  • 1:41

    So let's combine calc with CSS variables to build up margin values for

  • 1:47

    the nav list items and the header.

  • 1:50

    I'll start by creating a variable named spacing and

  • 1:56

    assigning it the value 2.

  • 2:03

    Now I'll set main-nav li's margin value to 0 calc.

  • 2:10

    And between the parentheses, I'll multiple the spacing value of 2 by 10 pixels,

  • 2:18

    and this is going to set the left and right margin values to 20 pixels.

  • 2:24

    Then up in the header rule,

  • 2:25

    I'll multiply the spacing value by 1em to set the margin bottom value.

  • 2:30

    So first I'll specify calc, then I'll pass calc the spacing

  • 2:36

    variable with var spacing, and multiply that by 1em.

  • 2:41

    And this is going to give us a margin bottom value of 2em.

  • 2:48

    You're not limited to just pixels or units,

  • 2:51

    you can use all valid units that are available in CSS, right?

  • 2:55

    So up next, you'll learn to update SVG attributes with CSS variables

You need to sign up for Treehouse in order to download course files.

Sign up