Sass convert string to color

user_1778465 0
Viewed 3671

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?

sass colors
2 Answers

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).

enter image description here

user_39301280

you couldn't use string as input for colors method codepen

$color-primary: '255, 0, 0' !default;
$light-accent: lighten(convertStringToColor($color-primary), 40.5%) !default;

body{
  background: convertStringToColor($color-primary);
}

h1{
  color: $light-accent;
}
user_31101710
Related