Sass convert string to color

Question

I am using mdl, which has color variables setup like $color-primary: '255, 0, 0' !default;

This is making it hard for me to take that color and lighten it.

I have tried using unquote(), but it is giving me an error:

Argument $color of lighten($color, $amount) must be a color

$color-primary: '255, 0, 0' !default;
$light-accent: lighten(unquote('rgb(#{$color-primary})'), 13.5%) !default;

Is there someway I can convert that to a color?

Answer 1

This is an interesting problem. You've found in the MDL source that $color-primary is actually just a string that includes quotes: "63,81,181".

Here's the tricky part: MDL is using these strings everywhere. They aren't actually ever evaluating those colours in a way that SASS understands them. So this:

unquote('rgb(#{$color-primary})')

doesn't return the SASS rgb() instance method, it just returns a plain ol' string.

That's a long way of saying that I don't think you can do what you're looking to do. You can use the other colours in the MDL $palette-indigo, though, in the format $palette-indigo-xxx (photo from material.io).