Utilize the hexadecimal color code as a string within the darken function

Question

When working with a less style, I have a string variable.

@colorString: 'DADADA';

I can convert it into a color:

@color: ~'#@{colorString}';

Then, I am able to use @color to define a value in a style:

div { color: @color }

However, utilizing it with the darken() function (or any other built-in color management function) is not possible. An example of this:

background: linear-gradient(to bottom right,darken( @color , 20%), @color);

The compiler presents an error message stating that darken cannot be evaluated because color.toHSL is not a function.

This issue arises since @color is considered a string ('#DADADA') rather than a color (#DADADA), preventing the function from correctly parsing it.

Is there a solution to this problem without altering the fact that @colorString must remain as a string?

Answer 1

Answer №1

To incorporate color into your design, make sure to use the `color()` function for parsing the string.

@colorString: 'FFFFFF';
@color: color('#@{colorString}');
background: linear-gradient(to bottom right, lighten(@color, 10%), @color);

Check out the documentation:

Answer 2

To incorporate color into your design, make sure to use the `color()` function for parsing the string.

@colorString: 'FFFFFF';
@color: color('#@{colorString}');
background: linear-gradient(to bottom right, lighten(@color, 10%), @color);

Check out the documentation: