我如何改变一个无序列表的颜色，这个列表有一个未知的深度并且是递归生成的？

Question

我有本字典：

tree['node-A'] = {
    'class-type': 'Date' 
    'class-type-index': 0
}

tree['node-B'] = {
    'class-type': 'Ratio' 
    'class-type-index': 1
}

tree['node-C'] = {
    'class-type': 'Integer' 
    'class-type-index': 2
}

在HTML中，我生成的类如下：

<ul>
{%for key, value in tree.items %} 
    {%include "tree_view_template.html" %}
{%endfor%}
</ul>

<li class="{{ node.class-type}} index-{{node.class-type-index}}">
 {{node.key}}
    {%if node.has_childs %}
        <ul>
         {%for ch in node.all_childs %}
              {%with node=ch template_name="tree_view_template.html" %}
                   {%include template_name%}
              {%endwith%}
         {%endfor%}
         </ul>
    {%endif%}
</li>

忽略任何语法错误或语法错误。重要的部分是：

So in the end I will have something like:

<li class="Date index-0">
<li class="Ratio index-1">
<li class="Integer index-2">
<li class="Boolean index-3">
..

所以问题是，在Sass中，我如何从index-0开始一直到index-N，并在每次向下钻取列表时使颜色变暗？

现在我这样做只是为了得到一个想法，但显然这是完全错误的做法。

$base-colour: some very light shade of green;

.index-0 {
    background-color: $base-colour;
}

.index-1 {
    darken( $base-color, 5%)
}

.index-2{
    darken( $base-color, 10%)
}