title: animation color sass with variables not working
body: <p>I want to select the color depend of class. But it always takes the last values in the $color1 and $color2 variables. So it is always showed as yellow.</p>
  
  <pre><code>.animated-color {
    -webkit-animation: color_change var(--time-color) infinite alternate;
    -moz-animation: color_change var(--time-color) infinite alternate;
    -ms-animation: color_change var(--time-color) infinite alternate;
    -o-animation: color_change var(--time-color) infinite alternate;
    animation: color_change var(--time-color) infinite alternate;
  }
  
  .color-white {
    $color1: white;
    $color2: white;
    @-webkit-keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
    @-moz-keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
    @-ms-keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
    @-o-keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
    @keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
  }
  
  .color-yellow {
    $color1: rgb(255, 253, 137);
    $color2: rgb(255, 254, 168);
    @-webkit-keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
    @-moz-keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
    @-ms-keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
    @-o-keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
    @keyframes color_change {
      from {
        background-color: $color1;
      }
      to {
        background-color: $color2;
      }
    }
  }
  </code></pre>