0

In sass, I have to support IE9 gradients by using svg linear gradient, which takes color hex string without #. Those are multi color gradients, that cannot be achieved by ie filters.

I have defined colors like this:

$color: #ff0000;

But for ie stuff to work, I need to have color without hash sign: ff0000 only.

It seems it is not possible to remove a character in string with sass ?

Does that mean that I must declare colors without #, and then add it in every mixin, except IE svg declarations ? This seems as bad approach but can't find a better solution, has anyone run into a similar issue ?

NenadP
  • 585
  • 7
  • 24

1 Answers1

0

IE 9 will display gradients with # colour strings, the example below displays the gradient correctly in IE9. It wouldn't be valid SVG to have colours without the # although Webkit didn't enforce that at one time.

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#ff0000" stop-opacity="1"/>
            <stop offset="100%" stop-color="#0000ff" stop-opacity="0"/>
        </linearGradient>
    </defs>

    <circle r="120" cx="120" cy="120" fill="url(#gradient)"/>
</svg>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Thanks, though, I have to add the property via css, and there xml is encoded. Please see http://www.colorzilla.com/gradient-editor/ , under css. Property is url(data:image/svg+xml;base64 ... – NenadP Jul 16 '13 at 21:18
  • That website is creating the base64 encoded url with hashes. Try decoding the answer and you'll see. – Robert Longson Jul 17 '13 at 00:22
  • It seems it might br possible to go with utf8 but still # needs to be encoded, so I cant create my sass mixin ... http://stackoverflow.com/questions/10768451/inline-svg-in-css – NenadP Jul 17 '13 at 08:42
  • # is not encoded as %23 in the colorzilla example, its just base64 encoded. If you're **not** going to base64 encode it then yes you do need to escape it. – Robert Longson Jul 17 '13 at 11:19