Как использовать переменные в селекторе

Вы можете использовать переменную в качестве селектора:

@color: .yellow;
.a {
  .b @{color} {
    ...

Но это не будет работать в вашем примере, потому что переменные компилируются из последнего использования цепочки (вот почему вы можете повторно использовать переменную), а это означает, что .red никогда не будет заполняться там, где вы хотите (там же, как желтый, потому что он находится в последний размах)

Вы можете сделать много вещей, чтобы обойти это, миксины, функции, включения, карты и т. д., на самом деле все, что соответствует вашим потребностям. Вот простой пример с общим циклом:

@colors: cornflowerblue, green, red, yellow;

.a  {
  .b {
    each(@colors, {
      .@{value} .d {
        .e {
          color: @value;
        }
      }
    });
    .d .e { 
      font-size: 2em;
    }
    .d .f {
      font-size: 1.2em;
    }
  }
}

Вы можете нажать кнопку «Просмотреть скомпилированный css» в нижней части встроенного фрагмента или увидеть здесь

<p class = "codepen" data-height = "265" data-theme-id = "dark" data-default-tab = "css" data-user = "soulshined2" data-slug-hash = "ErBYOY" style = "height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title = "ErBYOY">
  <span>See the Pen <a href = "https://codepen.io/soulshined2/pen/ErBYOY/">
  ErBYOY</a> by soulshined (<a href = "https://codepen.io/soulshined2">@soulshined2</a>)
  on <a href = "https://codepen.io">CodePen</a>.</span>
</p>
<script async src = "https://static.codepen.io/assets/embed/ei.js"></script>

Вариант использования довольно близок к различным «тематическим» вопросам, таким как:

• Как сделать тематизацию в lesscss
• Динамические переменные LessCss на основе класса-предка
• Каков наиболее эффективный способ изменить цвет нескольких одинаковых элементов в LESS?
• и Т. Д.

т.е. существует множество возможных решений, каждое из которых имеет свои плюсы и минусы в зависимости от других деталей и целей вашего реального проекта.

---

Принимая ваш «ожидаемый результат» как есть, хорошим началом было бы написать миксин, который обрабатывает повторяющийся код, например:

#1

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    .-(@color) {
        .@{color} .d .e {color: @color}  
    }
    .-(red);
    .-(yellow);
    .-(green);
    // etc.
}

---

С некоторыми хитростями и хакерами мы можем избавиться от .d .e повторений, но я сомневаюсь, что повышенная сложность и потенциальные проблемы того стоят:

#2

.a .b {
    .themed(~'.d .e', {
        font-size: 2em;
        color: black;
    }, {
        color: @color;
    });
}

// .....................
// generic "theme" impl.

.themed(@selector, @default, @colored) {
    .-(default);
    .-(red);
    .-(yellow);
    .-(green);

    .-(@color) {
         .@{color} @{selector}
             when (iscolor(@color)) {@colored();}
         @{selector}
             when not (iscolor(@color)) {@default();}
    }
}

---

Чтобы проиллюстрировать, что варианты возможной реализации для получения примера «ожидаемого результата» почти бесконечны и в основном зависят от того, с какими функциями Less вы знакомы и какие функции вы можете/хотите/хотите использовать, вот еще немного «Современных Пример Less», использующий более «традиционную»/«основную» логику (многие люди предпочтут использовать; требуется Less 3.x или выше):

#3

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    each(red yellow green, {
        .@{value} .d .e {color: @value}
    });
}

(хотя то же самое уже было предложено в другом ответе).

---

Говоря об элементах .color в середине селектора, подумайте, действительно ли ваш HTML требует этого. т.е. действительно ли вам понадобятся такие селекторы сверхспецифичный, как:
.a .b .yellow .d .e,
.x .y .yellow .d .e,
.p .q .yellow .d .e,
.a .b .yellow .foo .e,
имеющие разные значения цвета?

Набора типа .yellow .e {color: yellow} или что-то в этом роде не будет достаточно?