1
00:00:00,000 --> 00:00:05,018
[MUSIC]

2
00:00:05,018 --> 00:00:09,660
CSS can be immensely repetitive, and
maintaining it can be cumbersome.

3
00:00:09,660 --> 00:00:13,230
If you've used a CSS
preprocessor like Sass, or

4
00:00:13,230 --> 00:00:18,190
Less, or a tool like PostCSS, you may
already be used to declaring variables,

5
00:00:18,190 --> 00:00:21,070
to store and
keep track of values in your style sheets.

6
00:00:21,070 --> 00:00:24,040
Well, now,
you can use variables directly in CSS,

7
00:00:24,040 --> 00:00:26,430
no special processing tools necessary.

8
00:00:26,430 --> 00:00:29,270
I'm Guil, a developer and
teacher here at Treehouse.

9
00:00:29,270 --> 00:00:32,910
In this workshop, I'll teach you how to
make your style sheets less repetitive,

10
00:00:32,910 --> 00:00:36,720
modular, and
easier to maintain with CSS variables.

11
00:00:36,720 --> 00:00:40,240
Variables are one of the most
important concepts in programming.

12
00:00:40,240 --> 00:00:43,930
They provide a way to store and
keep track of information.

13
00:00:43,930 --> 00:00:46,580
Like variables in any
programming language,

14
00:00:46,580 --> 00:00:52,410
CSS variables hold references to values
you can reuse throughout your style sheet.

15
00:00:52,410 --> 00:00:55,950
CSS variables are formerly
known as Custom Properties.

16
00:00:55,950 --> 00:00:58,910
Because they're similar to
regular CSS properties, and

17
00:00:58,910 --> 00:01:03,130
set using a special syntax
called custom property notation.

18
00:01:03,130 --> 00:01:06,228
The two dashes in front of the [SOUND]
property name instruct the browser that

19
00:01:06,228 --> 00:01:07,322
it's a custom property.

20
00:01:07,322 --> 00:01:10,331
[SOUND] You can name a property
anything you want as long as it starts

21
00:01:10,331 --> 00:01:11,161
with two dashes.

22
00:01:11,161 --> 00:01:15,389
[SOUND] You assign the property a value
then refer to the property name

23
00:01:15,389 --> 00:01:19,260
in your code to retrieve its
value using the CSS bar function.

24
00:01:19,260 --> 00:01:23,589
Although they're technically called Custom
Properties most developers just call them

25
00:01:23,589 --> 00:01:24,610
CSS Variables.

26
00:01:24,610 --> 00:01:26,970
So I'll use the term CSS Variables and

27
00:01:26,970 --> 00:01:29,370
Custom Properties interchangeably
throughout this workshop.

28
00:01:29,370 --> 00:01:34,140
And one of the best part of using CSS
Variables is that they make the repetitive

29
00:01:34,140 --> 00:01:38,720
nature of CSS easier to manage and let
you change property values in one place

30
00:01:38,720 --> 00:01:41,700
without having to find and
replace them across your style sheet.

31
00:01:41,700 --> 00:01:45,590
For instance, how many times have you
reused values in your style sheet,

32
00:01:45,590 --> 00:01:47,500
then later due to a design change or

33
00:01:47,500 --> 00:01:51,230
client request, had to spend
valuable time changing each value?

34
00:01:51,230 --> 00:01:54,500
Well, CSS let's you assign
values to variables, and

35
00:01:54,500 --> 00:01:57,980
reference the variables
anywhere you would use value.

36
00:01:57,980 --> 00:02:02,510
As you're about to learn variables are a
game changer in CSS and there are plenty

37
00:02:02,510 --> 00:02:07,180
of differences and advantages to using CSS
variables over preprocessor variables.

38
00:02:07,180 --> 00:02:10,508
They can do a whole lot more
than just store repeated values.

39
00:02:10,508 --> 00:02:11,930
As I'm recording to this video,

40
00:02:11,930 --> 00:02:15,910
CSS variables are supported in
all major browsers except IE.

41
00:02:15,910 --> 00:02:19,510
So be sure to check the teacher's notes
for up-to-date information about browser

42
00:02:19,510 --> 00:02:23,340
support and fall-back methods for browsers
that do not support CSS variables.