SASS混合器：将十六进制转换为CSS滤镜

Question

有没有一种方法可以创建一个 SASS mixin，从一个 HEX 值生成 CSS 滤镜？我有不同颜色的 SVG 图像，取决于网站，而且不想硬编码所有的滤镜。

有没有办法创建一个 SASS mixin，可以根据给定的 HEX 值创建一个 CSS 滤镜？我有不同颜色的 SVG 图片，取决于网站和设计，不想为每个颜色写死滤镜代码。

#000000

to

filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7500%) hue-rotate(18deg) brightness(115%) contrast(115%);

以下是一个使用Javascript的例子，可以输入十六进制代码并输出如下结果：

https://codepen.io/sosuke/pen/Pjoqqp

- Mike Flynn

---

嘿，你找到任何解决方案了吗？ - Reza

我没有，只是手动创建了过滤器。 - Mike Flynn

Answer 1

这是一个 SCSS mixin 的示例：

https://jsfiddle.net/Tegos/3fchp0qm/

@mixin recolor($color: #000, $opacity: 1) {
  $r: red($color) / 255;
  $g: green($color) / 255;
  $b: blue($color) / 255;
  $a: $opacity;

  // grayscale fallback if SVG from data url is not supported
  $lightness: lightness($color);
  filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);

  // color filter
  $svg-filter-id: "recolor";
  filter: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
        <feColorMatrix type="matrix" values="\
          0 0 0 0 #{$r}\
          0 0 0 0 #{$g}\
          0 0 0 0 #{$b}\
          0 0 0 #{$a} 0\
        "/>\
      </filter>\
    </svg>\
    ##{$svg-filter-id}');
}

来源：https://dev59.com/5FgQ5IYBdhLWcg3wUSO3#62880368

在IT技术中，"stack"通常指的是一种数据结构，类似于一个桶，可以在其中存储一组数据，并且遵循后进先出（LIFO）规则。这个数据结构被广泛地应用于计算机程序的内存管理、函数调用和递归等方面。

堆栈溢出是指向堆栈中添加了超过其容量的数据或对象，导致堆栈数据溢出到其他内存区域。这可能会导致程序崩溃或产生不安全的行为，例如覆盖其他重要数据。简而言之，当你试图使用太多的堆栈空间时，堆栈溢出就会发生。

- Tegos

---

这是Windows的正确答案。显然，在MacOS上不起作用。 - Hoang Le