0

Can someone please explain why this code doesn't work:

@red-1:#ff0000;
@red-2:#990000;
@blue-1:#000ff;
@blue-2:#00099;

.setTheme(@theme){
  @color-1:~"@{@{theme}-1}";
  @color-2:fade(~"@{@{theme}-2}", 10%); //doesn't work
  body.@{theme} .button{
    background:@color-1;
    color:@color-2;
  }
}

.setTheme(~"red");

Thanks;

Alex
  • 55
  • 6
  • What doesn't work about it? – fvrghl Sep 30 '13 at 15:46
  • The compiler shows the following error: `Syntax error: error evaluating function `fade`: Object # has no method 'toHSL'.setTheme(~"red");` I expect that the CSS output is following:`color: rgba(153, 0, 0, 0.1);` – Alex Sep 30 '13 at 16:39

2 Answers2

3

It is a Bug

Color functions have an issue with respect to this that has been submitted.

Workaround

Don't try to do both calls in one string. Set the variable value to your inner variables. Then when you use them, use the @@ syntax directly. Like this:

@red-1:#ff0000;
@red-2:#990000;
@blue-1:#000ff;
@blue-2:#00099;

.setTheme(@theme){
  @color-1:~"@{theme}-1";
  @color-2:~"@{theme}-2"; 
  @color-2faded: fade(@@color-2, 10%);
  body.@{theme} .button{
    background:@@color-1;
    color:@color-2faded;
  }
}

.setTheme(~"red");

Or without the extra variable:

.setTheme(@theme){
  @color-1:~"@{theme}-1";
  @color-2:~"@{theme}-2"; 
  body.@{theme} .button{
    background:@@color-1;
    color: fade(@@color-2, 10%);
  }
}
ScottS
  • 71,703
  • 13
  • 126
  • 146
0

You can also try the "color" function to convert a string to color

@color: '#ccc';
background: color(@color);

But yes, it didn't work on multi variables like your case. Resulted in #NaNNaNNaN

bigOmega ツ
  • 371
  • 3
  • 13