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

Posted 2023-03-06

【中文标题】SASS mixin 将十六进制转换为 CSS 过滤器

【英文标题】：SASS mixin to convert a hex to a CSS filter

【发布时间】：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

【问题讨论】：

嘿，你找到解决办法了吗？

我没有，只是手动创建了过滤器

【参考方案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://***.com/a/62880368/4293444