Установить индекс по элементам html

Question

Я пытаюсь нацелить определенный элемент в списке SASS, используя индекс элемента html (Создание образа жизни Конвея в css / html).Для этого мне нужно каким-то образом узнать индекс текущего элемента.

Текущий прогресс в Codepen: https://codepen.io/martitv/pen/ZPjddv?editors=1100

Я пробовал это:

Html:

<div class="grid">

    <div class="cell" style="--x:1; --y:1"></div>  
    <div class="cell" style="--x:2; --y:1"></div>  
    <div class="cell" style="--x:3; --y:1"></div>  
    <div class="cell" style="--x:4; --y:1"></div>  
    <div class="cell" style="--x:5; --y:1"></div>

    <div class="cell" style="--x:1; --y:2"></div>  
    <div class="cell" style="--x:2; --y:2"></div>  
    <div class="cell" style="--x:3; --y:2"></div>  
    <div class="cell" style="--x:4; --y:2"></div>  
    <div class="cell" style="--x:5; --y:2"></div>

    <div class="cell" style="--x:1; --y:3"></div>  
    <div class="cell" style="--x:2; --y:3"></div>  
    <div class="cell" style="--x:3; --y:3"></div>  
    <div class="cell" style="--x:4; --y:3"></div>  
    <div class="cell" style="--x:5; --y:3"></div>

    <div class="cell" style="--x:1; --y:4"></div>  
    <div class="cell" style="--x:2; --y:4"></div>  
    <div class="cell" style="--x:3; --y:4"></div>  
    <div class="cell" style="--x:4; --y:4"></div>  
    <div class="cell" style="--x:5; --y:4"></div>

    <div class="cell" style="--x:1; --y:5"></div>  
    <div class="cell" style="--x:2; --y:5"></div>  
    <div class="cell" style="--x:3; --y:5"></div>  
    <div class="cell" style="--x:4; --y:5"></div>  
    <div class="cell" style="--x:5; --y:5"></div>

</div>

Это дает каждой ячейке свои собственные переменные css --x и --y, давая мне знать их индекс в css.

Я хотел использовать этот индекс, чтобы установить цвет фонана основе списка цветовых элементов:

$color: (
  (white, white, white, white, white),
  (white, white, black, white, white),
  (white, white, black, white, white),
  (white, white, black, white, white),
  (white, white, white, white, white)
);

Я хочу получить доступ к этому списку, используя переменные x и y, например:

  1%, 100% {
    background-color: nth(nth($cells, var(--y)), var(--x));
  }

Это дает мне ошибку: "var(--y)" is not a number for nth"

Я предполагаю, что это потому, что var (- y) вычисляется после кода SCSS?

Есть ли другой способ добиться этого?