Преобразовать шестнадцатеричное значение в атрибут фильтра

Question

Я нашел это на codepen , но он использует JS для вычисления значения filter вручную.Я хочу быть в состоянии сделать это, используя SASS, чтобы я мог построить их более программно.

Ниже приведен пример конечных результатов, но он требует от меня жесткого кода.Мы используем gulpjs для компиляции наших SASS файлов.

Как бы я смог сделать то, что делает codepen, но с 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>

Answer 1

Если вы ослабите требование исходного вопроса о том, что это будет чисто решение CSS - вы можете установить цвет напрямую, используя SVG-фильтр и ссылаться на этот фильтр из CSS.Пятый столбец матрицы feColorMatrix можно использовать для явной установки RGB.

Answer 2

Вот как я бы начал

1. Посмотрите на цвет функции , предоставляемые Sass
2. Реализация отсутствующих математических функций (cos, sin и т. д.)
3. Начните преобразование JS в Sass, чтобы узнать, что еще нужно

Я хотел бы опубликовать функции, но это не тривиальная задача (это можетготово) и сейчас 2.08 утра, и мне нужно поспать - давайте назовем это в первый раз;)

А пока попробуй и обнови свой вопрос тем, что у тебя получилось, а не