less/css - 値が（n）のデータ属性を持つDOM要素をターゲットにする

Question

メニュー階層/タクソノミー内の深度に基づいてメニュー項目に色の配列を割り当てるナビゲーションメニューがあります。たとえば、すべての最上位レベルのメニュー項目は黒色になり、次のレベルは赤色になり、次のレベルは緑色になります。階層が非常に深くなるので、数学を使ってそれらをターゲットにしたいと思いますそのCSSはn番目の子供をターゲットにすることができます。しかし、これらのコンテナ要素（「ブラウズレベル」）はDOMから動的に追加され、DOMから削除されるため（つまりDOM内にすべて同時に存在するわけではないため）、nth-childは使用できません。データ属性。

ので、ここで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; 
} 

...など

（シーケンスが繰り返さ思われる後）8色の値があります。私は（LESSか普通のCSSを使って）このコードを短縮することはできますか？

Answer 1

@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); 

がhttp://less2css.org/によると、それが生成すると、私は行くだろう：http://stackoverflow.com/questions/13554978/less-：

.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; 
}