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

这就是我的开始方式

看看Sass提供的颜色functions
实施失踪的math functions（cos，罪恶等）
开始将JS转换为Sass来查看还需要什么

我想发布这些功能，但这不是一件微不足道的任务（可以完成），现在是2.08AM，我需要睡觉–我们将其称为第一轮；）

同时尝试一下，并根据您的工作状况而不是工作状况来更新您的问题

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

2 个答案: