递归变量可以用CSS表示吗? [英] Can a recursive variable be expressed in css?
问题描述
对于html:
<body>
<div>
<div>
<div>
...
</div>
</div>
</div>
</body>
是否有任何方法可以创建使用其父级值的递归变量:
Are there any ways to create a recursive variable that uses its parent's value:
body > div {
--x: 1;
}
div {
--x: calc(var(--x) + 1);
}
以上内容无效，因为 css变量不能具有依赖周期.另一个无效的示例:
The above is not valid because css variables cannot have dependency cycles. Another invalid example:
body > div {
--is-even: 0;
--is-odd: 1;
}
div {
--is-even: var(--is-odd);
--is-odd: var(--is-even);
}
在CSS中是否有任何间接方式来表达这种递归变量?
Are there any indirect ways to express such recursive variables in css?
推荐答案
您可以使用两个CSS变量来模拟递归行为并避免循环依赖.
You can use two CSS variables to simulate the recursive behavior and avoid cycle dependency.
这里是一个例子:
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)
If you inspect the element you will find for the last element that border-right is equal to 17px (10 + 7) and border-left is equal to 16px (10 + 6)
这个想法非常适合具有2级结构的元素，例如列表:
This idea fits nicely in elements with a 2 level structure, like lists:
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>
这篇关于递归变量可以用CSS表示吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
