less/css - targetowanie elementów domena z atrybutami danych o wartości (n)

Question

Mam menu nawigacyjne, które przypisuje tablicę kolorów do elementów menu na podstawie ich głębokości w hierarchii menu/taksonomii. Na przykład, wszystkie elementy menu na najwyższym poziomie otrzymują kolor czarny, następny poziom staje się czerwony, następny poziom staje się zielony, itd., A ponieważ hierarchia idzie bardzo głęboko, chciałabym kierować je za pomocą matematyki, w pewnym sensie że css może celować w n-dziecko. Jednak nie mogę użyć n-dziecka, ponieważ te elementy kontenera ("poziom przeglądania") są dynamicznie dodawane i usuwane z DOM (nie wszystkie są w DOM w tym samym czasie), dlatego jestem celem atrybuty danych.

Więc oto CSS:

.browse-level[data-level="1"] li a { 
    background: @level1; 
} 

.browse-level[data-level="2"] li a { 
    background: @level2; 
} 

.browse-level[data-level="3"] li a { 
    background: @level3; 
} 

.browse-level[data-level="4"] li a { 
    background: @level4; 
} 

... itd

Istnieje 8 wartości kolorów (po którym sekwencja będzie powtarzać). Czy mogę (używając LESS lub zwykłego CSS) skrócić ten kod?

Answer 1

pójdę z

@level1: #aaa; 
@level2: #bbb; 
@level3: #ccc; 
@level4: #ddd; 
@level5: #eee; 
@level6: #fff; 
@level7: #000; 
@level8: #111; 

.mymixin(@lev) when (@lev > 0) { 
    @ruleNameA: e('.browse-level[data-level="'); 
    @ruleNameB: e('"] li a'); 
    @{ruleNameA}@{lev}@{ruleNameB} { 
    @bgAux: e('level@{lev}'); 
    background: @@bgAux ; 
    } 
    .mymixin(@lev - 1) ; 
} 

.mymixin(8); 

Według http://less2css.org/ produkuje:

.browse-level[data-level="8"] li a { 
    background: #111111; 
} 
.browse-level[data-level="7"] li a { 
    background: #000000; 
} 
.browse-level[data-level="6"] li a { 
    background: #ffffff; 
} 
.browse-level[data-level="5"] li a { 
    background: #eeeeee; 
} 
.browse-level[data-level="4"] li a { 
    background: #dddddd; 
} 
.browse-level[data-level="3"] li a { 
    background: #cccccc; 
} 
.browse-level[data-level="2"] li a { 
    background: #bbbbbb; 
} 
.browse-level[data-level="1"] li a { 
    background: #aaaaaa; 
}