css - Why doesn't this Less compile? What can I do to fix it? -

as is, complains that:

syntaxerror: error evaluating function darken: a.tohsl not function on line 24, column 1:

it seems should work; doing wrong? how can effect want?

@red2: #842211; @green2: #842212; @blue2: #842213;  @colors: red2, blue2, green2;  .color-style-helpers(@colors; @index) when (@index > 0) {   .color-style-helpers(@colors; (@index - 1));    @colorname : extract(@colors, @index);   @color : ~"@{@{colorname}}";   // @color : #ffffff; // uncomment line , work   @darkcolor : darken(@color, 10%);          .background-@{colorname} {         border-color: @darkcolor;     background-color: @color;   }      }   .color-style-helpers(@colors; length(@colors);); 

you can see results here

the problem below line of code in example. makes content of @color var treated string instead of color. because of this, less compiler couldn't convert color hsl value required darken function , results in error.

@color : ~"@{@{colorname}}"; 

instead of that, use double @ syntax. there no need wrapping quotes or escape function case.

@color : @@colorname;