如何在 CSS 中表达可预测的重复声明模式？

Question

是否有优雅（即非冗长）的方式在样式表中表达以下 CSS 样式？

.my-class ul li::after {left: 162px;}
.my-class ul ul li::after {left: 180px;}
.my-class ul ul ul li::after {left: 198px;}
.my-class ul ul ul ul li::after {left: 216px;}
.my-class ul ul ul ul ul li::after {left: 234px;}
.my-class ul ul ul ul ul ul li::after {left: 252px;}
.my-class ul ul ul ul ul ul ul li::after {left: 270px;}
.my-class ul ul ul ul ul ul ul ul li::after {left: 288px;}
.my-class ul ul ul ul ul ul ul ul ul li::after {left: 306px;}
.my-class ul ul ul ul ul ul ul ul ul ul li::after {left: 324px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul li::after {left: 342px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 360px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 378px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 396px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 414px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 432px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 450px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 468px;}
.my-class ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul li::after {left: 486px;}

我知道我可以在 javascript 中使用以下循环将上面的样式规则添加到 CSSOM 计算中：

for (var i = 1; i < 20; i++) {
    var nestedLists = 'ul ';
    var selector = 'left: ' + (144 + (18 * i)) + 'px;';
    var lastRule = document.styleSheets[0].cssRules.length;
    document.styleSheets[0].insertRule('.my-class ' + nestedLists.repeat(i) + ' li::after {' + selector + '}', lastRule);
}

但我正在寻找某种简洁的 CSS-native 语法来表达上面的行，如果可能的话。

例如 可以使用CSS自定义属性实现一些聪明的东西吗？

请不要使用 Less 或 Sass 的解决方案。谢谢。

这是显示绝对定位 ::after 伪元素的屏幕截图:

Answer 1

如问题正文中所述，一种方法是部署一些 javascript 以将 CSS 规则写入 CSSOM，在计算上：

工作示例：

for (var i = 1; i < 20; i++) {
    var nestedLists = 'ul ';
    var selector = 'left: ' + (144 + (18 * i)) + 'px;';
    var lastRule = document.styleSheets[0].cssRules.length;
    document.styleSheets[0].insertRule('.my-class ' + nestedLists.repeat(i) + ' li::after {' + selector + '}', lastRule);
    console.log(document.styleSheets[0].cssRules[lastRule].cssText);
}

如何在 CSS 中表达可预测的重复声明模式？

How to express a predictably repeating pattern of declarations in CSS?

css

cssom

css-variables