css - Less lists as a mixin argument(s)

Question

say i have this mixin:

.loop-strings("A, B, C", "1, 2, 3", "X, Y, Z";);

implemented like so:

.loop-strings(@list, @index: 1) when (isstring(extract(@list, @index))) {
    @currentMember: extract(@list, @index);

    .do-something-with(@currentMember);

    .loop-strings(@list, (@index + 1)); /* loop the next member */
}

.do-something-with(...) {
    @args1 : e(@arguments); 
    @args2 : A, B, C;
    args1: @args1;
    args2: @args2;
    extract-args1-2: extract(@args1, 2);
    extract-args2-2: extract(@args2, 2);
}

The result:

args1: A, B, C;
extract-args1-2: extract(A, B, C, 2);
args1: 1, 2, 3;
extract-args1-2: extract(1, 2, 3, 2);
args1: X, Y, Z;
args2: A, B, C;
extract-args1-2: extract(X, Y, Z, 2);
extract-args2-2: B;

These seams to be a difference between @foo:e("A, B, C"); or @foo:~"A, B, C"; and @foo:A, B, C;

I seems i can't use extract(@foo, 2); unless it is defined as an object list.

Is there a way to convert an esacaped string to an object list

Answer 1

It seams to be a difference between e("A, B, C") or ~"A, B, C" and A, B, C

Yes, both e("A, B, C") and ~"A, B, C" create so-called "anonymous value" type which is never considered as a meaningful type (it's not a list, not a number, not even a string). Basically an escaped values are just something like "Don't touch me" or "I know what I'm doing!" stuff, they are just being output "as is" and the compiler never tries to understand what's inside. This is basically what exactly the escaped values are for: "print" out something the compiler can't understand.

In general notice that you can use both comma and space as the value delimiter in a list. For example you can use .loop-strings(A B C, 1 2 3, X Y Z;); (two-dimensional list as a single parameter, so with a multi-argument mixin you even can get a tree-dimensional list in one line). Is there any particular reason you need to use quoted and/or escaped values? For example you could write it just as:

test {
    .loop-lists(A, B, C; 1, 2, 3; X, Y, Z);
}

.loop-lists(@lists...) {
    .loop(length(@lists));
    .loop(@i) when (@i > 0) {
        .loop((@i - 1));
        .do-something-with(extract(@lists, @i));
    }
}

.do-something-with(@list) {
    v1: extract(@list, 1);
    v2: extract(@list, 2);
    v3: extract(@list, 3);
}

---

extract(A, B, C, 2);

For the moment this is incorrect extract syntax, extract accepts only two parameters so you could write this as:

extract(A B C, 2);

Or as:

@list: A, B, C;
extract(@list, 2);

---

Here's an example with couple of additional generic hints:

test {
    .do-something(A B C, 1 2 3, X Y Z; foo bar, baz; banana);
}

.do-something(@p1, @p2, @p3) {
    args1: @arguments;                                     // 3D list
    args2: extract(@arguments, 1);                         // 2D list: A B C, 1 2 3, X Y Z
    args3: extract(extract(@arguments, 1), 1);             // 1D list: A B C
    args4: extract(extract(extract(@arguments, 1), 1), 1); // single value: A

    p1- :   @p1;               // A B C, 1 2 3, X Y Z
    p1-1:   extract(@p1, 1);   // A B C
    p1-3:   extract(@p1, 3);   // X Y Z

   @p2-1:   extract(@p2, 1);   // foo bar
    p2-1:   @p2-1;             // foo bar
    p2-1-2: extract(@p2-1, 2); // bar
    p2-2:   extract(@p2, 2);   // baz

    p3- :   @p3;               // banana
    p3-1:   extract(@p3, 1);   // banana
    // etc.

    quoted-p2: "@{p2}"; // if you need a quoted string do it in reverse (i.e. non-quoted list to a quoted string)
}