@each ul li函数使背景变暗4％？ （SCSS）

Question

使用SCSS使4个盒装li元素变暗。我可以使用类手动执行此操作，但这会破坏语义的目的。试图创建一个@for函数来处理这个问题，但我没有找到任何资源去做我需要的东西。

这是我希望通过SCSS实现自动化的结果：

HTML：

<ul>
    <li>
        <h2>Title</h2>
        <img>
        <p></p>
        <a class="button"></a>
    </li>
    <li>
        <h2>Title</h2>
        <img>
        <p></p>
        <a class="button"></a>
    </li>
    <li>
        <h2>Title</h2>
        <img>
        <p></p>
        <a class="button"></a>
    </li>
    <li>
        <h2>Title</h2>
        <img>
        <p></p>
        <a class="button"></a>
    </li>
</ul>

SCSS：

li {
    &.one {
        background: $primary-color
    }
    &.two {
        background: darken($primary-color, 4%);
    }
    &.three {
        background: darken($primary-color, 8%);
    }
    &.four {
        background: darken($primary-color, 12%);
    }
}

必须有一种方法可以在不使用类的情况下实现自动化...也许是增量？在...上加4％？这是我迷路的地方......

任何人都可以协助并解释他们的代码吗？我不知道怎么开始。