Using variables as selector, issue in inheritance

[jeremypetrequin]

Hi everybody, thank for your great work!

I'm using LESS on a projet where we have one color by master page, so all the children page use 1 different color for a lot of background, hover, color, border... depending of it parent.

I can't simply use a class .background-color for all my elements to colorize for example, for several reasons.

I wanted to create one variable with all the selectors to colorize, for example :

@background-color : ~'selector1, selector2:hover, selector3 ...';
@text-color : ~'selector4, selector2:hover, selector10 ...';
@border-color : ~'selector4, selector2:hover, selector10 ...'

And after that, using my page parent class name :

.master-1 {
    @{background-color} { background-color:@color1;}
}

.master-2 {
    @{background-color} { background-color:@color2;}
}

But the issue is that the output should be :

.master-1 selector1, .master-1 selector2:hover, .master-1 selector3 {
    background-color:black;
}

And in fact, it's :

.master-1 selector1, selector2:hover, selector3 {
    background-color:black;
}

To summarize :

.master-page-1 {
    .selector-1, .selector-2 {
        background-color:@color1;
    }
}

.master-page-2 {
    .selector-1, .selector-2 {
        background-color:@color2;
    }
}

And

@my-selector: ~'.selector-1, .selector-2';
.master-page-1 {
    @{my-selector} {
        background-color:@color1;
    }
}

.master-page-2 {
    @{my-selector} {
        background-color:@color2;
    }
}

Should output the same CSS, but only the first is correct :

.master-page-1 .selector-1, .master-page-1 .selector-2 {
    background-color:black;
}
.master-page-2 .selector-1, .master-page-2 .selector-2{
    background-color:black;
}

The second output :

.master-page-1 .selector-1, .selector-2 {
    background-color:grey;
}

.master-page-2 .selector-1, .selector-2 {
    background-color:grey;
}

Do you have any idea about this?

[seven-phases-max]

See #1421 (also #1694 and other issues linked there).

[SomMeri]

Variable values are included into selector "as is", without further analysis. So, list placed into a variable can not be used the way you would like.

You can avoid selectors list repetition if you rearrange your less like this:

@color1: blue;
@color2: red;
.selector1, selector2:hover, selector3 {
  .master-page-1 &  {
    background-color: @color1;
  }

  .master-page-2 & {
    background-color: @color2;
  }
}

it compiles into:

.master-page-1 .selector1, .master-page-1 selector2:hover, .master-page-1 selector3 {
  background-color: #0000ff;
}
.master-page-2 .selector1, .master-page-2 selector2:hover, .master-page-2 selector3 {
  background-color: #ff0000;
}

[SomMeri]

Closing as a duplicate of #1421 and #1694. Feel free to make your case there.

[jeremypetrequin]

I was writing the same thing @SomMeri :), I've saw that solution in issue #1694, thanks everybody.