Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Using CSS Variables

Well done!

You have completed Using CSS Variables!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Best Practices and Tips

1:02 with Guil Hernandez

Now that you've learned how and where custom properties and var() work, you should know where they do not work, and best practices for using them.

[SOUND] Now that you've seen how and 0:00
where custom properties in the var function work, 0:01
you should know where they do not work and a few best practices for using them. 0:04
[SOUND] First, var is invalid if used in a selector. 0:07
This will not work. 0:12
[SOUND] var is also not valid as a property name, 0:13
you can only use var in CSS values. 0:18
You also can't use var in a media query expression like this. 0:22
[SOUND] Finally, you can't use the var function to create a length value. 0:28
This is an invalid value. 0:32
[SOUND] Again, be sure to use calc to build your length values using var 0:35
as you learned in an earlier video. 0:39
Finally, variable names are case sensitive. 0:42
So for example, each of these three variables represent a different variable. 0:46
As you'll learned in this workshop, CSS variables are a useful and fun feature. 0:50
So i suggest that you experiment with them and begin using them in your projects. 0:56
Thanks everyone, and happy coding. 1:00