我正在尝试使用html元素的索引来定位SASS列表中的特定元素(在css / html中使用Conway的生活方式)。 为此,我需要以某种方式知道当前元素的索引。
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代码之后求值的?
还有另一种方法可以实现这一目标吗?