在html兄弟元素上设置索引

时间:2019-03-25 16:05:55

标签: html css sass

我正在尝试使用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代码之后求值的?

还有另一种方法可以实现这一目标吗?

0 个答案:

没有答案