如何缩短CSS的重复递归块

Question

由于下面的CSS块具有重复性，我想知道是否可以缩短它。

.effort是<div>，包含：

• 孩子<span>元素.effortTitle
• 包含一个子元素<div> .effort
• 等

    .effortNode .effortTitle{
        padding-left:20px;
    }
    .effortNode .effortNode .effortTitle{
        padding-left:40px;
    }
    .effortNode .effortNode .effortNode .effortTitle{
        padding-left:60px;
    }
    .effortNode .effortNode .effortNode .effortNode .effortTitle{
        padding-left:80px;
    }
    .effortNode .effortNode .effortNode .effortNode .effortNode .effortTitle{
        padding-left:100px;
    }
    .effortNode .effortNode .effortNode .effortNode .effortNode .effortNode .effortTitle{
        padding-left:120px;
    }
    etc...

Answer 1

您可以在SCSS / SASS中更有效地编写此内容。

https://sass-lang.com/

阅读语法，它超级易于使用。

Answer 2

更新

除了使用SCSS之外，还可以使用CSS轻松完成它：

.effortNode * {
  padding-left: 20px;
}

它为20px中的每个子元素添加.effortNode填充。

---

Here is a CodePen。

注意：我使用的是margin-left而不是padding，所以您可以看到它的工作原理。