Selectors as variable

[michaelschwarz]

@mylist: .firstrun, .testrun
span {
    @{mylist} {
        font-weight:bold;
    }
}
#myid {
    div {
        @{mylist} {
            padding-left:10px;
        }
    }
}

Expected result:

span.firstrun, span.testrun {
    font-weight:bold;
}
#myid div.firstrun, #myid div.testrun {
    padding-left:10px;
}

Or I'm missing something, maybe there is a different approach?

[seebaermichi]

Not quite the same, but following is already possible:

@mylist: ~".firstrun";
span {
    @{mylist} {
        font-weight:bold;
    }
}
#myid {
    div {
        @{mylist} {
            padding-left:10px;
        }
    }
}

results in:

span .firstrun {
  font-weight: bold;
}
#myid div .firstrun {
  padding-left: 10px;
}

[michaelschwarz]

Well, my main focus was on a list of selectors I want to modify sometimes, not just a placeholder as in your case.

See my full less file:

@firstrun-baseurl: "../..";
@firstrun-iconsmall: 11px;
@firstrun-iconlarge: 18px;
@firstrun-list: .firstrun1, .firstrun2, .firstrun3, .firstrun4, .firstrun5, .testrun;

.firstruns(@icon-set:"") {
    .firstrun1 { 
        background-image: url("@{firstrun-baseurl}/images/firstrun@{icon-set}.png");
        background-repeat: no-repeat;  
        background-position: 0 0;
    }
    .firstrun2 {
        &:extend(.firstrun1);
        background-image:url("@{firstrun-baseurl}/images/run2@{icon-set}.png");
    }
    .firstrun3 {
        &:extend(.firstrun1);
        background-image:url("@{firstrun-baseurl}/images/run3@{icon-set}.png");
    }
    .firstrun4 {
        &:extend(.firstrun1);
        background-image:url("@{firstrun-baseurl}/images/run4@{icon-set}.png");
    }
    .firstrun5 {
        &:extend(.firstrun1);
        background-image:url("@{firstrun-baseurl}/images/run5@{icon-set}.png");
    }
    .testrun {
        &:extend(.firstrun1);
        background-image:url("@{firstrun-baseurl}/images/testrun@{icon-set}.png");
    }
}

.firstruns();

// **** private implementations ****

// cvsched or any other old LDS linemake
// TODO: table.lds
table {
    span.firstrun1, span.firstrun2, span.firstrun3, span.firstrun4, span.firstrun5, span.testrun {
        width: @firstrun-iconsmall + 2;
        cursor:help;
    }
}

// orderdialog.aspx
td.OrderViewValue2 {
    span.firstrun1, span.firstrun2, span.firstrun3, span.firstrun4, span.firstrun5, span.testrun { 
        width: @firstrun-iconsmall + 2;
        background-position: 0 2px; 
        cursor:help;
    }
}

// cvsched tab .NET MT
#d_mtcvschedtablist {
    span.firstrun1, span.firstrun2, span.firstrun3, span.firstrun4, span.firstrun5, span.testrun { 
        width: @firstrun-iconsmall + 2;
        height: @firstrun-iconsmall;
        background-position: 0 2px;
    }
    tr.firstrunlarge {
        .firstruns("l");
        span.firstrun1, span.firstrun2, span.firstrun3, span.firstrun4, span.firstrun5, span.testrun { 
            width: @firstrun-iconlarge + 4;
            height: @firstrun-iconlarge;
            background-position: 0 0;
        }
    }
}
.c_general .articleFlags {
    .firstruns("l");
    .firstrun1, .firstrun2, .firstrun3, .firstrun4, .firstrun5, .testrun {
        width: 100%;
        height: 32px;
        background-color:red;
        padding-left: 25px; 
        padding-top: 2px; 
        /*border-bottom: 1px dashed white;*/
        background-position: 2px 6px;
    }
}

In the private implementations I need to repeat always all selectors (images in this case). I know that I could change my html output to have always i.e. a .firstrun class which needs to be added everytime.

<span class="firstrun firstrun1">...</span>

[seven-phases-max]

This is two features in fact. The main limitation in this case is not the variable (it can be defined as @mylist: ~'.a, .b, .c';) but the selector interpolation where the interpolated variable is always interpreted as a single selector (no comma or & are recognized there so such list won't work with nesting rulesets). So technically this is a dupicate of #1421, #1694 etc. (see other issues crosslinked there).

maybe there is a different approach?

Yes, currently such repetitive rulesets are usually generated via loops, for example your .firstruns code can be implemented as:

@import "for";
@firstrun-baseurl: "../..";
.firstruns();
.firstruns(@icon-set: "") {
    .testrun {
        background-image: url("@{firstrun-baseurl}/images/testrun@{icon-set}.png");
        background-repeat: no-repeat;  
        background-position: 0 0;
    }
    .for(5); .-each(@i) {
        .firstrun@{i} {
            &:extend(.testrun);
            background-image:url("@{firstrun-baseurl}/images/run@{i}@{icon-set}.png");
        }
    }
}

And the rest of your code can be implemented via extend(... all) iterations (it can go even inside the same .firstruns loop above). Note that the Less loops are not limited to numeric sequences but can work with a list of identifiers as well.

[lukeapage]

I'd like in the future to add support for selectors in variables to allow
this. E.g.

@A: $(.a, .b);
.c { @A {

Would do what you want.

[seven-phases-max]

Closing as duplicate of #1421.