CODEWITHSUNDEEP
colorssass
Get Off My Lawn
Get Off My Lawn

Reputation: 36351

Sass convert string to color

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?

Upvotes: 7

Views: 4826

Answers (2)

roshanak jamali
roshanak jamali

Reputation: 13

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;
}

Upvotes: 0

Franey
Franey

Reputation: 4354

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

Upvotes: 2

Related Questions