Css 使用SASS函数自动化嵌套元素的背景色

我正在制作一个多级导航系统，希望每个级别的背景颜色变暗20%（因此第一级=fff、第二级=ccc、第三级=999等等）。必须有一种很棒的方法来使用SASS函数动态地自动化这个过程，但是我不能完全理解如何设置语句。谁能给我指出正确的方向吗

---

递归mixin应该做到这一点：

@mixin级别（$initial、$percentage、$depth）
$next:darken（$initial，$percentage）
@如果（$depth>0）
锂
背景：$初始
@包括级别（$next，$percentage，$depth-1）
@包括级别（白色、20%、5）

本质上，

levels

mixin创建一个

li

规则，但随后在其中嵌套另一个

levels

副本。（并且

$depth

参数确保它不会永远持续。）

---

你可以随意使用

li

选择器来获得更多的控制，例如，将其更改为

.class

选择器，或者使用

&>ul>li

之类的工具。如果你只利用alpha透明性，你可以节省一点工作量

li li
  background: rgba(black, .2)

---

另外，有效的标记也很有帮助。

真是个好主意。实际菜单将动态创建。。。对于这个例子，我似乎有点粗心。原始链接已更新。虽然此解决方案产生的效果与我想要的效果类似，但不透明度不是一个选项/颜色必须为纯色。除非您的ul元素也有指定的背景，否则将第一个列表设置为纯白即可。@cimmanon Nice，这比我的答案要优雅得多，我绝对主张在可能的时候使用它。更复杂的SASS方法仍然有用的一种情况是，如果你想，比如说，为不同的级别使用一个颜色列表，而不是每次都用相同的颜色来加深它们；或者，如果你想做一个非线性的比例，例如，减轻（$initial，someFunctionOfDepth（））。啊哈！我有这个想法，但将其应用于ul而不是第一个li，因此透明度没有叠加/产生预期效果。尽管@anandthakker提供的函数也能起作用，并为我使用函数提供了一些启示，但我还是接受了这个答案，因为我更喜欢最简单/直接的方法：）谢谢大家。

li
  background: darken(white, 20%)

li li
  background: rgba(black, .2)