Variabili dinamiche LessCss basate sulla class degli antenati

Ho un modello di pagina che ha una class di branding sull’elemento body :

  

Africa

Usando il seguente less, posso usare una variabile per il colore del marchio e applicarla al color di un selettore CSS:

 @brand-default: #649d84; @brand-africa: #df6f20; @brand-nz: #444; .brand-color { .brand-default & { color: @brand-default; } .brand-africa & { color: @brand-africa; } .brand-nz & { color: @brand-nz; } } h1 { .brand-color; } 

Funziona bene, ma a volte voglio applicare il colore a un’altra dichiarazione CSS, come ad esempio il background-color , e per fare ciò con il codice sopra ho bisogno di duplicare il mixin di .brand-color per applicare invece il .brand-color di background-color .

Idealmente mi piacerebbe che il mixin restituisse una variabile – so che è ansible, ma non riesco a capire come usare il nome della class per determinare il valore restituito.

Bene, no, non puoi usare il nome della class per determinare una variabile o un valore di ritorno. Di solito è fatto al contrario, per esempio in questo modo:

 @brand-default: #649d84; @brand-africa: #df6f20; @brand-nz: #444444; h1 { .brand-colors(); } h2 { .brand-colors(background-color); } .brand-colors(@property: color) { .color(default); .color(africa); .color(nz); .color(@name) { [email protected]{name} & { @value: '[email protected]{name}'; @{property}: @@value; } } } 

O in questo modo:

 @brand-default: #649d84; @brand-africa: #df6f20; @brand-nz: #444444; h1 { .brand-colors({ color: @color; }); } h2 { .brand-colors({ background-color: @color; }); } .brand-colors(@style) { .brand-color(default); .brand-color(africa); .brand-color(nz); } .brand-color(@name) { [email protected]{name} & { @value: ~'[email protected]{name}'; @color: @@value; @style(); } } 

O anche così:

 .brand(default) {@{color}: #649d84} .brand(africa) {@{color}: #df6f20} .brand(nz) {@{color}: #444444} h1 { .brand-colors(); } h2 { .brand-colors(background-color); } .brand-colors(@color: color) { .-(default); .-(africa); .-(nz); .-(@name) { [email protected]{name} & { .brand(@name); } } } 

O qualcosa in mezzo. Oppure … oh aspetta, c’è tutta una famiglia di metodi per questa roba (incluse varie combinazioni), vedi per esempio:

Di solito i metodi list / array / loop sono più compatti, anche se personalmente preferisco qualcosa di stupido come questo:

 .themed({ h1 { color: @color; } h2 { background-color: @color; } }); .themed(@styles) { .-(default, #649d84); .-(africa, #df6f20); .-(nz, #444444); .-(@name, @color) { [email protected]{name} { @styles(); } } }