Можно ли иметь переменную в имени класса CSS?

Да, переменные CSS теперь существуют, и вы также можете использовать такие фреймворки, как SCSS (мой любимый) или LESS!

То, что вы хотите, на самом деле было бы невозможно со стандартными переменными CSS или, по крайней мере, нецелесообразно. Я бы рекомендовал использовать SCSS, и вы можете легко добавить SCSS в проект реагирования, если он еще не является частью вашего проекта.

Ваш код можно преобразовать в 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. Вы можете сопоставить массив и использовать индекс для вычисления 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>