5

我有一个导航菜单，它根据菜单层次结构/分类中的深度为菜单项分配一组颜色。因此，例如，所有顶级菜单项的颜色为黑色，下一级为红色，下一级为绿色，等等，并且由于层次结构非常深，我想使用数学来定位它们，有点像该css可以针对第n个孩子。但是，我不能使用 nth-child，因为这些容器元素（“浏览级别”）是从 DOM 中动态添加和删除的（它们并非同时都在 DOM 中），这就是我成为目标的原因数据属性。

所以这是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;
}

... ETC

有 8 个颜色值（之后序列将重复）。我可以（使用 LESS 或纯 CSS）缩短此代码吗？

4

1 回答 1

5

我会去

@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/它产生：

.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;
}
于 2013-04-28T15:21:12.597 回答