Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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().
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
You need to sign up for Treehouse in order to download course files.
Sign up