There is a kinda secret, yet well supported CSS feature called currentColor
. It's like a special CSS variable that has been supported in almost all browsers for almost all time (see linked Caniuse).
Usage
The currentColor
value can be used in CSS to indicate the current value of color
should be used. A common use case is setting a border color:
a.ghost
color: white
border: 1px solid currentColor
&:hover
color: red // Border color will change as well
Note that in many cases, you can simply omit the color to achieve the same result (i.e. in the example, simply write border: 1px solid
).
Posted by Dominik Schöler to makandra dev (2018-05-14 13:14)