Zugriff Weniger Variablennamen in einer Liste

Question

OK, lassen Sie uns sagen, dass ich eine weniger Datei wie so haben:

// Turquoise 
@turquoise: #1ABC9C; 
@turquoise-2: #16A085; 

// Greens 
@green: #2ECC71; 
@green-2: #27AE60; 

// Blues 
@blue: #3498DB; 
@blue-2: #2980B9; 

// Navy Blues 
@navy: #34495E; 
@navy-2: #2C3E50; 

// Purples 
@purple: #9B59B6; 
@purple-2: #8E44AD; 

// Yellows 
@yellow: #F1C40F; 

// Oranges 
@orange: #F39C12; 
@orange-2: #E67E22; 
@orange-3: #D35400; 

// Reds 
@red: #E74C3C; 
@red-2: #C0392B; 

// Greys 
@grey: #ECF0F1; 
@grey-2: #BDC3C7; 
@grey-3: #95A5A6; 
@grey-4: #7F8C8D; 

@colour-scheme: 
    @red, @red-2, 
    @orange, @orange-2, @orange-3, 
    @yellow, 
    @green, @green-2, 
    @turquoise, @turquoise-2, 
    @blue, @blue-2, 
    @purple, @purple-2, 
    @navy, @navy-2, 
    @grey, @grey-2, @grey-3, @grey-4 
; 

Und ich wollte einen mixin machen, wie so ging:

.createBG(@colour-array: @colour-scheme, @n: length(@colour-scheme), @i: 0){ 
    &.<[COLOUR-ARRAY[@i] VARIABLE NAME]>{ 
     background-color: extract(@colour-array, @i); 
    } 
    .createBG(@colour-array, (@i + 1)) 
} 

Wie würde ich erreichen, <[COLOUR-ARRAY[@i] VARIABLE NAME]> durch gültigen Less-Code zu ersetzen, der mir den variablen Namen des aktuellen Index der Liste/des Feldes geben würde.

Was wäre die todsichere und beste Praxis, um dies zu implementieren?

Answer 1

Sie können dies unter Verwendung der extract-Funktion selbst tun, indem Sie einfach die Variablennamen der Variablen als Wert für die @color-scheme-Variable festlegen, anstatt sie selbst zu übergeben. Innerhalb des Mixins kann @@ verwendet werden, um den Namen der Variablen in ihren tatsächlichen Farbwert aufzulösen.

@colour-scheme: 
    red, red-2, orange, orange-2, orange-3, yellow, green, green-2, turquoise, turquoise-2, 
    blue, blue-2, purple, purple-2, navy, navy-2, grey, grey-2, grey-3, grey-4; 

.createBG(@colour-array: @colour-scheme, @n: length(@colour-scheme), @i: 1) when (@i <= @n){ 
    @color: extract(@colour-array, @i); 
    &.@{color}{ 
    background-color: @@color; 
    } 
    .createBG(@colour-array, @n, @i + 1) 
} 
.createBG(); 

Da Sie die Farbnamen auch benötigen (der Klassenname sein), dann würden Sie auf jeden Fall in irgendeiner Variable, die Namen zu speichern haben und so gibt es nicht viel Reduktion möglich. Aber wir könnten trotzdem assoziatives Array verwenden. Ein Beispiel für ein assoziatives Array ist unten angegeben.

@colour-scheme: 
    red #E74C3C, red-2 #C0392B, 
    orange #F39C12, orange-2 #E67E22, orange-3 #D35400, 
    yellow #F1C40F, 
    green #2ECC71, green-2 #27AE60, 
    turquoise #1ABC9C, turquoise-2 #16A085, 
    blue #3498DB, blue-2 #2980B9, 
    purple #9B59B6, purple-2 #8E44AD, 
    navy #34495E, navy-2 #2C3E50, 
    grey #ECF0F1, grey-2 #BDC3C7, grey-3 #95A5A6, grey-4 #7F8C8D; 

.createBG(@colour-array: @colour-scheme, @n: length(@colour-scheme), @i: 1) when (@i <= @n){ 
    @color-name-hex: extract(@colour-array, @i); 
    @color-name: extract(@color-name-hex, 1); 
    @color-hex: extract(@color-name-hex, 2); 
    &.@{color-name}{ 
    background-color: @color-hex; 
    } 
    .createBG(@colour-array, @n, @i + 1) 
} 
.createBG(); 

Hinweis: Werfen Sie einen Blick auf this bug in v2.6.1 und es könnte Ihre Schlaufen am Ende zu verderben. Es wird behoben obwohl.