4

In my project I have a CSS custom variables like this:

:root {
  --primary-color: #e04c4c;
  --secondary-color: #2c2c5e;
  --text-color: #d67900; 
}

In my LESS files I have used LESS color functions to get more colors base on its primary and secondary. This is how its look like:

.component1 {
  background: darken(--primary-color, 10%);
}

.component2 {
  background: lighten(--secondary-color, 5%);
}

But when I compile this, it gives an error like this?

// Undefined_methodError: error evaluating function darken: // Object # has no method 'toHSL'

When googling I found a solution for SASS, but not for LESS.

Can anybody tell me is there any possible workaround for this particular case?

Thank you.

user3733831
  • 2,886
  • 9
  • 36
  • 68
  • Your [issue](https://github.com/less/less.js/issues/3537) on the Less/Less.js Git repo was answered: "Less runs at compile-time, not run-time (typically), and `--primary-color` is not a valid Less variable." See the posted [response](https://github.com/less/less.js/issues/3537) for a workaround. – charles Jul 15 '20 at 15:24
  • @charles, yes it is. but in this case I can't use less variable like that (in response). I have difined my theme colors dynamically and created CSS varibles to store them in main index page. Then I need to get those colors into `Less` like this `@primary-color : var(--primary-color)`. Its ok. but in LESS functions its not working. Eg. `color : lighten(@primary-color, 10%)`. – user3733831 Jul 16 '20 at 05:14
  • Less won't resolve the CSS variable so that approach won't work. If you can edit the selector from `:root` to `:root, .root` (or something similar), you can try this approach: `color: lighten(.root()[--primary-color], 10%);`. – charles Jul 16 '20 at 18:03
  • @charles, Thank you for your suggestion. Can you elaborate your suggestion? Its good if you can create an answer for it. Thank you. – user3733831 Jul 17 '20 at 03:53
  • I just realized that you wrote: "...store them in main index page." If that means an internal stylesheet (i.e., inside a ` – charles Jul 17 '20 at 18:55
  • https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable – Shanimal Sep 15 '22 at 21:01

0 Answers0