Define variable name with variable in LESS operation

Question

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;

The compiler shows the following error: Syntax error: error evaluating function fade: Object #<Object> has no method 'toHSL'.setTheme(~"red"); I expect that the CSS output is following:color: rgba(153, 0, 0, 0.1); — Alex
– Alex, Commented Sep 30, 2013 at 16:39

ScottS · Accepted Answer · 2013-09-30 18:22:36Z

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

answered Sep 30, 2013 at 18:22

ScottS

72.4k13 gold badges131 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bigOmega ツ · Accepted Answer · 2014-02-06 23:08:58Z

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

answered Feb 6, 2014 at 23:08

bigOmega ツ

3713 silver badges13 bronze badges

Collectives™ on Stack Overflow

Define variable name with variable in LESS operation

2 Answers 2

It is a Bug

Workaround

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

It is a Bug

Workaround

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related