Using currentColor

currentColor CSS3

I heard about currentColor a few months ago and I surprised for its good compatibility (IE9+). Technically speaking, the currentColor represents the calculated value of the color property. The right use provides us an opportunity to clean and smart our CSS code.

Introducing currentColor
I'll use a very common font icon for this example, for example the GitHub logo from Font Awessome.
This icon will be inside a button with the same color:

//HTML
<button>
  <i class="fa fa-github"></i>
  Click me
</button>

//CSS (Sass)
.fa-github {
  font-size: 1rem;
  color: #000;
}

button {
  color: #C8C8C8;
  cursor: pointer;
 
  &:hover {
    color: #D4D4D4;
  }
 
  &:active {
    color: #F4F4F4;
  }
}

If you want the same color of the icon inside the button, you should do it:

button {
  color: #C8C8C8;
  cursor: pointer;

  .fa-github {
     color: #C8C8C8;
   }
 
  &:hover {
    color: #D4D4D4;

    .fa-github {
       color: #D4D4D4;
     }
  }
 
  &:active {
    color: #F4F4F4;

    .fa-github {
       color: #F4F4F4;
     }
  }
}

With currentColor you can inherit the value of the current color of the button and set it to the icon:

button {
  color: #C8C8C8;
  cursor: pointer;

  .fa-github {
     color: currentColor;
   }
 
  &:hover {
    color: #D4D4D4;
  }
}

When the button is hovered, the color changes to #D4D4D4, so, the value of currentColor will be #D4D4D4. The icon inherits the value and its color also changes. Very useful.

Codepen example: