Pętla przez tablicę nazw zmiennych w Less

W naszej aplikacji mamy wstępnie ustawioną listę kolorów, z których użytkownik może wybrać i wszystko, co z nim związane, będzie miało ten kolor.

W całej aplikacji będziemy mieć różne moduły z dołączonym kolorem JAKO nazwą klasy.

Np.

<div class="example_module green">
  ...
</div>

Używamy mniej dla naszego CSS.

W wielu miejscach robimy takie rzeczy:

.example_module.green { background: @green; }
.example_module.red { background: @red; }
.example_module.blue { background: @blue; }
etc

Chciałbym móc ustawić wszystkie nazwy kolorów jako tablicę i iterację nad nimi. Jeśli dodamy kolory w przyszłości musimy tylko dodać je w jednym miejscu.

Pseudo kod: 

@colors: ['green', 'red', 'blue'];

for each @color in @colors {
  .example_module.@color { background: @color; }
}

Czy coś takiego jest w ogóle wspierane w LESS?

 53
loopsless
Author: seven-phases-max, 2014-01-29
Source

4 answers

Zobacz Pętle . Na przykład (zakładając @green, @red, @blue zmienne są zdefiniowane gdzie indziej): 

@colors: green, red, blue;

.example_module {
    .-(@i: length(@colors)) when (@i > 0) {
        @name: extract(@colors, @i);
        &.@{name} {background: @@name}
        .-((@i - 1));
    } .-;
}

- - -

W nowoczesnym Less to samo może być bardziej proste z Pomocą Lists plugin: 

@colors: green, red, blue;

.for-each(@name in @colors) {
    .example_module.@{name} {
        background: @@name;
    }
}

- - -

I w Legacy Less cukier składniowy można uzyskać za pomocą: 

@import "for";

@colors: green, red, blue;

.example_module {
    .for(@colors); .-each(@name) {
        &.@{name} {background: @@name}
    }
}

Gdzie zaimportowany fragment "for" (to tylko wrapper mixin dla rekurencyjnych pętli Less) można znaleźć tutaj (z przykładami tutaj i tutaj ).

 87
Author: seven-phases-max,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-25 12:07:39

Ten mixin działa dobrze dla mnie. Drugi param jest blokiem kodu, który ma dostęp do bieżącej iteracji elem (@value) I index (@i).

  1. Zdefiniuj mixin: 

    .for(@list, @code) {
    & {
        .loop(@i:1) when (@i =< length(@list)) {
            @value: extract(@list, @i);

            @code();

            .loop(@i + 1);
        }

        .loop();
    }
}

  2. Użycie: 

    @colors: #1abc9c, #2ecc71, #3498db, #9b59b6;

.for(@colors, {
    .color-@{i} {
        color: @value;
    }
});

  3. Wynik css: 

    .color-1 {
  color: #1abc9c;
}
.color-2 {
  color: #2ecc71;
}
.color-3 {
  color: #3498db;
}
.color-4 {
  color: #9b59b6;
}
 15
Author: Ed Kolosovsky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-17 12:07:01

Z nowoczesnym LESS (>=3.7), możesz użyć wbudowanego each Funkcja: 

/* (assuming @clr-green, @clr-red, @clr-blue variables are defined elsewhere) */
@colors: {
  green: @clr-green;
  red: @clr-red;
  blue: @clr-blue;
}

each(@colors, {
  .example_module.@{key} {
    background: @value;
  }
});
 10
Author: eyecatchUp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-21 10:57:38
  1. Zdefiniuj mixin: 
.foreach(@list, @body, @i: length(@list)) when (@i>0) 
{
    .foreach(@list, @body, @i - 1);

    @n: length(@list);
    @value: extract(@list, @i);
    @body();
    /* you can use @value, @i, @n in the body */
}
  1. Użycie: 
.example-module {
  .foreach (red green blue,
  {
    &.@{value} {
      color: @value;
    }
  });
}

Inny przykład: 

.nth-child (@list, @style) {
    .foreach(@list, 
    {
      @formula: e(%("%dn+%d", @n, @i));
      &:nth-child(@{formula}) {
        @style();
      }
    });
}

tr {
  .nth-child (#bbb #ccc #ddd #eee,
  {
      background: @value;
  });
}
 -1
Author: Алексей Тимошкин,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-16 12:34:16