SASS mixin 将十六进制转换为 CSS 过滤器

【问题标题】：SASS mixin to convert a hex to a CSS filterSASS mixin 将十六进制转换为 CSS 过滤器
【发布时间】：2020-09-10 09:12:00
【问题描述】：

有没有办法创建一个 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

【问题讨论】：

嘿，你找到解决办法了吗？
我没有，只是手动创建了过滤器

标签： javascript html css sass css-filters

【解决方案1】：

这是一个示例 scss 混合： 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://stackoverflow.com/a/62880368/4293444

【讨论】：