Как сократить повторяющийся рекурсивный блок 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 это можно сделать намного проще с помощью всего лишь CSS:

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

Добавляет 20px заполнение для каждого дочернего элемента в .effortNode.

---

Вот кодовая ручка .

Примечание: я использовал margin-left вместо padding, так что вы можете увидеть, как это работает.

Answer 2

Вы можете написать это более эффективно в SCSS / SASS.

https://sass -lang.com /

Читайте о синтаксисе, его очень легко использовать.