SVGの線形グラデーションを生成するSCSS関数

svg-gradient.scss

@function encode-color($color) {
  $str_color: "" + $color;

  // if $color is #ffffff
  @if (str-index($str_color, "#") == 1) {
    $str_color: "%23" + str-slice($str_color, 2);
  }

  // if $color is rgba(255, 255, 255, 1)
  @if (str-index($str_color, "rgba") == 1) {
    $str_color: "rgba(" + red($color) + "%2C" + green($color) + "%2C" + blue($color) + "%2C" + alpha($color) + ")";
  }

  @return $str_color;
}

@function svg-gradient($from, $to, $angle: 0) {
  @return "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%20viewBox%3D%220%200%201%201%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20gradientTransform%3D%22rotate(" +
    $angle +
    ")%22%3E%3Cstop%20stop-color%3D%22" +
    encode-color($from) +
    "%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22" +
    encode-color($to) +
    "%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23a)%22%20d%3D%22M0%200h1v1H0z%22%2F%3E%3C%2Fsvg%3E";
}