Use Less Parameter in Attribute Selector

I'm using Less Loops, which are really just recursive parameterized mixins.

I'd like to use the passed in parameter (@counter) in the selector definition as follows:

<!-- language: lang-css -->

.loop(@counter) when (@counter > 0) {
    // call next iteration
    .loop((@counter - 1));    

    // code for each iteration
    &[data-size="@counter"] {
        width:  (3px * @counter);
        height: (3px * @counter);
    }
}

div {
  .loop(5); // launch the loop
}

If you copy and paste that into an online less compiler like less2css, you'll get the following:

<!-- language: lang-css -->

div[data-size="@counter"] {
  width: 3px;
  height: 3px;
}

Whereas what I want is:

<!-- language: lang-css -->

div[data-size="1"] {
  width: 3px;
  height: 3px;
}

Is this possible?

Turn out you have to escape the variable with curly braces {} like this:

<!-- language: lang-css -->

.loop(@counter) when (@counter > 0) {
    // call next iteration
    .loop((@counter - 1));    

    // code for each iteration
    &[data-size="@{counter}"] {
        width:  (3px * @counter);
        height: (3px * @counter);
    }
}

div {
  .loop(5); // launch the loop
}