Question

I'm working on a loop for colours in LESS. Problem is my @joined parameter. I want to optionally set the '&' to the class, but I get a syntax error. How could I set this?

SyntaxError: could not understand value for named argument

.coloursMixin(@joined: &;) {

.

@white: #fff;
@black: #000;
@array: 'white','black';

.coloursMixin(@joined: &;) {
    .for(@array); .-each(@array) {
        @name: e(@array);
        @joined.@{name} {color: @@name}
    }
}


// ............................................................
// .for

.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// ............................................................
// .for-each

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i)                  {.-each(extract(@array, @i))}
Was it helpful?

Solution

You don't need to pass any parameter. If you want to apply a different class to each selector, you can call a no-arg mixin inside it, and use & directly:

.coloursMixin() {
   .for(@array); .-each(@array) {
      @name: e(@array);
      &.@{name} {color: @@name}
   }
}

You can use it without any arguments:

.section {
  .coloursMixin();
}

and it will append the selector to each class:

.section.white {
  color: #ffffff;
}
.section.black {
  color: #000000;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top