Scss mixin with string function

user_4008056 0
Viewed 334

I have an scss mixin that applies a color to an svg dynamically:

$someColor: #ff3300;

@include successCheck($someColor);

@mixin successCheck($colour) {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 -46 417.813 417" xmlns="http://www.w3.org/2000/svg"><path fill="#{$colour}" d="M159.988 318.582c-3.988 4.012-9.43 6.25-15.082 6.25s-11.094-2.238-15.082-6.25L9.375 198.113c-12.5-12.5-12.5-32.77 0-45.246l15.082-15.086c12.504-12.5 32.75-12.5 45.25 0l75.2 75.203L348.104 9.781c12.504-12.5 32.77-12.5 45.25 0l15.082 15.086c12.5 12.5 12.5 32.766 0 45.246zm0 0"/></svg>');
}

the problem I'm seeing is that the color passed through is a hex value (#ff3300) and in the background-image data url the # is causing a problem, because in the data url it should be %23. I can't modify the orginal scss variable, since it is used elsewhere as a regular color.

I did try string-slice($color, 1) to remove the #, but this did not work. Is it possible to pass a hex color as a variable to an svg background image?

scss-mixins sass
1 Answers

Converting color values to strings indeed is very ugly in SASS!

(1) String replacement # to %23 don't work in URL

Your idea to replace the character # with %23is formal correct. But that approach does not work as in an URL as a hex-color is not associated with a color string/value at all.

To check it yourself here is the SASS method to transfer the hex-color to string with using '%23' for #:

//### SASS: transfer color to string
$someColor: #ff3300;
$string: str-slice(#{$someColor}, 2,7);
$string: '%27' + $string; 

// becomes: %27ff3300
// --> test it in your mixin
// --> or for testing write the color string direct to the CSS
// --> it will not be accepted as color

(2) Workaround: write rgb-color-string to URL

The URL notation accepts rgb-colors.

But the challenge is, that SASS transfers colors given as rgb() to hex-code. So, you need a little trick so that SASS will take the color code as string. Use SASS functions red() / green() / blue() to build the string and concatenade the values partly.

Here is the example to your mixin:

//SASS 

@mixin successCheck($color) {
    
    // transfer given (hex-)color to rga-string
    $color: 'rgb(' + red($color) + ',' + green($color) + ',' + blue($color) + ')';

    // include string variable to your code
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 -46 417.813 417" xmlns="http://www.w3.org/2000/svg"><path fill="#{$color}" d="M159.988 318.582c-3.988 4.012-9.43 6.25-15.082 6.25s-11.094-2.238-15.082-6.25L9.375 198.113c-12.5-12.5-12.5-32.77 0-45.246l15.082-15.086c12.504-12.5 32.75-12.5 45.25 0l75.2 75.203L348.104 9.781c12.504-12.5 32.77-12.5 45.25 0l15.082 15.086c12.5 12.5 12.5 32.766 0 45.246zm0 0"/></svg>');
}

// will become CSS:

background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 -46 417.813 417" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(255,51,0)" d="M159.988 318.582c-3.988 4.012-9.43 6.25-15.082 6.25s-11.094-2.238-15.082-6.25L9.375 198.113c-12.5-12.5-12.5-32.77 0-45.246l15.082-15.086c12.504-12.5 32.75-12.5 45.25 0l75.2 75.203L348.104 9.781c12.504-12.5 32.77-12.5 45.25 0l15.082 15.086c12.5 12.5 12.5 32.766 0 45.246zm0 0"/></svg>');

/// ... and make your svg hook in red color ;-)
user_92684850
Related