Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using CSS Variables!
You have completed Using CSS Variables!
Preview
You learned that you can update a CSS variables inline within the style attribute of an element. Similarly, you can use CSS variables to modify both style and presentational attributes inside inline SVGs.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You learned that CSS
variables can be updated and
0:00
altered in line within the style
attribute of an element.
0:02
Similarly you can use CSS
variables to modify both style and
0:05
presentational attributes
inside in line svgs.
0:09
In this video i'll teach you how
to create easily customizable
0:13
SVG icons with CSS variables.
0:16
To learn more about SVG be sure to watch
the SVG videos posted in the teachers
0:18
notes with this video.
0:22
So at index.html,
0:23
there's a symbol element that defines
a reusable template of a heart icon.
0:26
Below the symbol, the use element
is used three times to copy or
0:31
instantiate the symbol.
0:36
As you can see, this creates three
separate instances of the heart symbol.
0:38
Now the symbol is made
up of two path elements.
0:43
And I want to give each icon some
color and depth using two fill colors.
0:47
One path will have a light fill,
and the other path, a darker fill.
0:51
So start by giving each
path a fill attribute.
0:56
I'll set the top path's fill value to var,
1:06
passing it the variable
name secondary-fill.
1:10
And then I'll set the bottom's
fill value to var, primary-fill.
1:16
Notice that the parent SVG of
each instance of the symbol has
1:24
a different class.
1:28
We have heart-red,
heart-green, and heart-blue.
1:30
Well when you reuse SVG
graphics with the Use element
1:32
it inherits CSS from its parent context.
1:36
So in variables.css, I'll scope
the primary and secondary fill variables
1:40
locally inside each parent class and
set them to my desired colors.
1:45
So first,
in the heart-red rule I'll set a primary
1:49
fill Value to #c44,
1:54
then I'll set the secondary-fill
1:59
value to #d35f5f.
2:04
To set the other two, I'll go ahead and
copy this set of variables,
2:08
paste them inside the hard green rule.
2:14
And here I'll set primary
fill to 41af5d and
2:17
secondary fill to 5ece7f.
2:23
then down in the heart blue rule,
I'll set primary fill
2:32
to 2e978af and
2:38
secondary fill to 38acd0.
2:42
The icons inherit the color
values from their parent.
2:49
So now,
2:54
we have three colorful icons where each
path is set to a different fill color.
2:55
And you can use var as values for
other svg attributes like stroke.
3:00
For example, I'll give the symbol element.
3:05
A stroke width of two
3:09
Then add a stroke attribute,
and set the Value to var,
3:16
passing it the primary fill variable.
3:20
And as you can see,
3:26
the variable sets each stroke color using
the value assigned in the parent class.
3:27
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up