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.

Introducing "CSS Custom Properties for Cascading Variables"

2:24 with Guil Hernandez

Variables are an important concept in programming; they provide a way to store and keep track of information. Like variables in any programming language, CSS variables hold references to values you can reuse throughout your stylesheet. CSS Variables are formally known as "Custom Properties" because they're similar to regular CSS properties and set using custom property notation.

[MUSIC] 0:00
CSS can be immensely repetitive, and maintaining it can be cumbersome. 0:05
If you've used a CSS preprocessor like Sass, or 0:09
Less, or a tool like PostCSS, you may already be used to declaring variables, 0:13
to store and keep track of values in your style sheets. 0:18
Well, now, you can use variables directly in CSS, 0:21
no special processing tools necessary. 0:24
I'm Guil, a developer and teacher here at Treehouse. 0:26
In this workshop, I'll teach you how to make your style sheets less repetitive, 0:29
modular, and easier to maintain with CSS variables. 0:32
Variables are one of the most important concepts in programming. 0:36
They provide a way to store and keep track of information. 0:40
Like variables in any programming language, 0:43
CSS variables hold references to values you can reuse throughout your style sheet. 0:46
CSS variables are formerly known as Custom Properties. 0:52
Because they're similar to regular CSS properties, and 0:55
set using a special syntax called custom property notation. 0:58
The two dashes in front of the [SOUND] property name instruct the browser that 1:03
it's a custom property. 1:06
[SOUND] You can name a property anything you want as long as it starts 1:07
with two dashes. 1:10
[SOUND] You assign the property a value then refer to the property name 1:11
in your code to retrieve its value using the CSS bar function. 1:15
Although they're technically called Custom Properties most developers just call them 1:19
CSS Variables. 1:23
So I'll use the term CSS Variables and 1:24
Custom Properties interchangeably throughout this workshop. 1:26
And one of the best part of using CSS Variables is that they make the repetitive 1:29
nature of CSS easier to manage and let you change property values in one place 1:34
without having to find and replace them across your style sheet. 1:38
For instance, how many times have you reused values in your style sheet, 1:41
then later due to a design change or 1:45
client request, had to spend valuable time changing each value? 1:47
Well, CSS let's you assign values to variables, and 1:51
reference the variables anywhere you would use value. 1:54
As you're about to learn variables are a game changer in CSS and there are plenty 1:57
of differences and advantages to using CSS variables over preprocessor variables. 2:02
They can do a whole lot more than just store repeated values. 2:07
As I'm recording to this video, 2:10
CSS variables are supported in all major browsers except IE. 2:11
So be sure to check the teacher's notes for up-to-date information about browser 2:15
support and fall-back methods for browsers that do not support CSS variables. 2:19