[Aetae]

В современных браузерах можно так:

<style>
:root{
  --background: #00f;
  --span-background: #099;
}
div.a{
  --background: #f00;
  --span-background: #990;
}

div.b{
  --background: #0f0;
}

div{
  background: var(--background);
}
div span{
  background: var(--span-background);
}
</style>
<div class="a"><span>a</span></div>
<div class="b"><span>b</span></div>
<div class="c"><span>c</span></div>