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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Using CSS Variables with SVG

3:33 with Guil Hernandez

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.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up