html – 递归变量可以用css表示吗？

发布时间：2020-12-14 16:34:46 所属栏目：资源来源：网络整理

导读：对于html： bodydiv div div ... /div /div/div/body 有没有办法创建一个使用其父值的递归变量： body div { --x: 1;}div { --x: calc(var(--x) + 1);} 以上是无效的,因为css variables cannot have dependency cycles.另一个无效的例子： body div { --is-e

对于html：

<body>
<div>
  <div>
    <div>
      ...
    </div>
  </div>
</div>
</body>

有没有办法创建一个使用其父值的递归变量：

body > div {
    --x: 1;
}

div {
    --x: calc(var(--x) + 1);
}

以上是无效的,因为css variables cannot have dependency cycles.另一个无效的例子：

body > div {
    --is-even: 0;
    --is-odd: 1;
}

div {
    --is-even: var(--is-odd);
    --is-odd: var(--is-even);
}

是否有任何间接方式在css中表达这样的递归变量？

解决方法

您可以使用两个CSS变量来模拟递归行为并避免循环依赖.

这是一个例子：

body {
  --x: 10;
}
.y {
  --y: calc(var(--x) + 1);
}
.x{
  --x: calc(var(--y) + 1);
}
.result {
  border-right:calc(1px * var(--y)) solid red;
  border-left:calc(1px * var(--x)) solid green;
  height:50px;
}

<body>
  <div class="y">
    <div class="x">
      <div class="y">
        <div class="x">
          <div class="y">
            <div class="x">
              <div class="y result">

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

如果检查元素,您将找到最后一个元素,即border-right等于17px(10 7),border-left等于16px(10 6)

这个想法非常适合具有2级结构的元素,如列表：

body {
  --x: 30;
}

ul { 
    font-size: calc(var(--x) * 1px);
    --y: calc(var(--x) - 8);
}

li {
  --x: calc(var(--y));
}

<ul>level A
    <li>item 1
    </li>
    <li>item 2
      <ul>level B
        <li>item 2.1
          <ul>level C
            <li>item 2.1.1
            </li>
            <li>item 2.1.2
            </li>
          </ul>
        </li>
        <li>item 2.2
        </li>
      </ul>
    </li>
  </ul>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!