Start using currentColor in your CSS

currentColor is a CSS variable-like feature that’s been avaialble to developers for quite some time, but it goes unused and unknown - forced to live a life of obscurity.

Today I say “No more!”

–

In the broadest terms; currentColor is the equivalent of inherit. But alas, inherit does not work for something like this:

.link {
  color: #f00;
  
  &:hover {
    border-bottom: 1px solid inherit;
  }
}

No matter how much I want it to, this just won’t work. But with currentColor, this does work:

.link {
  color: #f00;
  
  &:hover {
    border-bottom: 1px solid currentColor;
  }
}

Go ahead and give it a try - make something awesome with it!

FIN