Create comma separated selectors with Less loop

Question

Currently I'm using the Less code below to create the defaults for my grid elements:

.create-grid-elements(@n, @i: 1) when (@i =< @n) {
    .grid_@{i} {
        position: relative;
        display:inline;
        float: left;
        margin-left: 1%;
        margin-right: 1%;
    }
    .create-grid-elements(@n, @i+1);
}

.create-grid-elements(16);

which outputs:

.grid_1 {
    ...
}

.grid_2 {
    ...
}

...

.grid_16 {
    ...
}

For the sake of debugging using browser dev tools, is there a way to tweak the loop (or write a new loop) such that instead of writing multiple independent selectors for the grid, it instead writes one selector that is comma separated like this?

.grid_1, .grid_2, ... , .grid_16 {
    ...
}

Thanks!!

Josh Crozier · Accepted Answer · 2015-01-07T00:19:59.367

You could use extend():

Extend is a Less pseudo-class which merges the selector it is put on with ones that match what it references.

Just create a base class, in this case .grid_1.

Then extend it inside the loop: .grid_@{i}:extend(.grid_1) {}.

Since the base class is being extended, it doesn't need to be included in the loop. The index now starts at 2.

.grid_1 {
    position: relative;
    display:inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
}

.create-grid-elements(@n, @i: 2) when (@i =< @n) {
    .grid_@{i}:extend(.grid_1) {}
    .create-grid-elements(@n, @i+1);
}

.create-grid-elements(16);

Output:

.grid_1, .grid_2, .grid_3, .grid_4,
.grid_5, .grid_6, .grid_7, .grid_8,
.grid_9, .grid_10, .grid_11, .grid_12,
.grid_13, .grid_14, .grid_15, .grid_16 {
    position: relative;
    display: inline;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
}

Unfortunately my team's using a version of less before v1.4.0 when the extend pseudo class was added. However, this works perfectly with the current version. — Bryan Grace, Jan 08 '15 at 17:15

Create comma separated selectors with Less loop

1 Answers1