将十六进制值转换为过滤器属性答案

【问题标题】：Convert hex value to filter attribute将十六进制值转换为过滤器属性
【发布时间】：2019-05-25 20:34:26
【问题描述】：

我确实在codepen 上找到了这个，但它使用JS 手动计算filter 值。我希望能够使用SASS 来做到这一点，以便我可以更以编程方式构建这些。

以下是最终结果的示例，但它需要我进行硬编码。我们正在使用gulpjs 编译我们的SASS 文件。

如果使用SASS，我怎么能做codepen 所做的事情？

.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>

【问题讨论】：

标签： html css svg sass gulp

【解决方案1】：

我会这样开始

看萨斯提供的颜色functions
实现缺失的math functions（cos、sin 等）
开始把JS转Sass看看还需要什么

我想发布函数，但这不是一项简单的任务（可以完成），现在是凌晨 2.08 点，我需要睡觉——我们称之为第一轮；）

同时试一试，用你的工作内容更新你的问题，而不是

【讨论】：

【解决方案2】：

如果您放宽原始问题的要求，即它是纯 CSS 解决方案 - 您可以使用 SVG 过滤器直接设置颜色并从 CSS 中引用该过滤器。 feColorMatrix 矩阵的第五列可用于显式设置 RGB。

【讨论】：