是的，CSS variables现在确实存在，你也可以使用像SCSS（我的最爱）或LESS这样的框架！
你想要的东西在标准的CSS变量中是不可能实现的，或者至少是不实用的。我的建议是使用SCSS，如果你的项目中还没有easily add SCSS to a react project，你可以使用它。
你的代码可以转换成SCSS来做你想做的事情，就像这样，它会输出你的确切代码：

$delay: 15ms;

@for $i from 1 through 4 {
  .link:hover .char#{$i} {
    transition-delay: $delay;
  }
  //increment delay
  $delay: $delay + $delay;
}

或

$delay: 15ms;

@for $i from 1 through 4 {
  .link:hover .char#{$i} {
    transition-delay: $delay * $i;
  }
}

或者更有可能的情况是，用例将被这样编写，以允许您为每个选择器单独编写样式

.link {
  // styles for `.link` go here

  &:hover {
    //styles for `.link:hover` go here

    //Loop for all the `.link:hover .char*` elements
    $delay: 15ms;
    @for $i from 1 through 4 {
      .char#{$i} {
        transition-delay: $delay * $i;
      }
    }
  }
}

如果你想尝试一下，请将其粘贴到这里，以查看编译后的CSS结果：https://sass.js.org/

根据你的样式化方法，你也可以使用内联样式和JavaScript来动态计算CSS属性值，而不需要SCSS。你可以Map一个数组，并使用索引来计算transitionDelay，如果一个元素当前被悬停在上面：

const [hoverIndex, setHoverIndex] = React.useState(-1);

  return (
    <div>
      {'hello'.split('').map((char, index) => {
        const transitionStyles = hoverIndex === index ? {transitionDelay: `${(index+1) * 15}ms`} : {}
        return <span onMouseEnter={() => setHoverIndex(index)} onMouseLeave={() => setHoverIndex(-1)} style={transitionStyles}>{char}</span>
      })
      }    
    </div>
  );
}

下面是一个字体大小的例子：
https://codesandbox.io/s/exciting-chaplygin-9czuhv?file=/src/App.js

因为你问是否有一种方法可以让它写得更动态，是的，有。我不认为你可以只用CSS让它完全动态，但我认为你可以从你现在的位置得到一半。
除了为每个字符添加一个单独的类之外，至少还有一种方法可以只使用一个类（如下所示），使用nth-child伪类选择器。然后你需要关注的就是CSS选择器：

.link:hover > span:nth-child(1) {
  transition-delay: 15ms;
}

.link:hover > span:nth-child(2) {
  transition-delay: 30ms;
}

.link:hover > span:nth-child(3) {
  transition-delay: 45ms;
}

.link:hover > span:nth-child(4) {
  transition-delay: 60ms;
}

<a href="#" class="link">
  <span>H</span>
  <span>e</span>
  <span>l</span>
  <span>l</span>
  <span>o</span>
</a>