Search code examples
htmlcsssvgsassgulp

Convert hex value to filter attribute

I did find this on codepen, but it uses JS to calculate the filter value manually. I want to be able to do this using SASS so that I can build these more programmatically.

Below is an example of the end results, but it requires me to hard code. We are using gulpjs to compile our SASS files.

How would I be able to do what the codepen does, but with SASS? 

.icon {
  background-image: url('https://kwiksher.com/wp-content/uploads/2012/09/runningcat.png');
  display: block;
}

.icon--single {
 width: 50px;
 height: 50px;
 background-position: 25% 50%;
 filter: invert(46%) sepia(36%) saturate(6980%) hue-rotate(159deg) brightness(94%) contrast(101%);
}
<div>
  <h2>Hello there</h2>
  <span class="icon icon--single">hi</span>
</div>

Solution

  • Here is how I would start

    1. Look at the color functions provided by Sass
    2. Implement the missing math functions (cos, sin etc.)
    3. Start converting JS to Sass to see what else is needed

    I would like to have posted the functions but it is not a trivial task (it can be done) and it's 2.08AM and I need sleep – let's call it round one ;)

    Meanwhile give it a try and update your question with what you got working and not