可以用css表示递归变量吗？
Mat*_*ner 9 html css css3 css-variables
对于html:
<body>
<div>
<div>
<div>
...
</div>
</div>
</div>
</body>
有没有办法创建一个使用其父值的递归变量:
body > div {
--x: 1;
}
div {
--x: calc(var(--x) + 1);
}
以上内容无效,因为css变量不能具有依赖循环.另一个无效的例子
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>