在 CSS 中动态添加顶部?

Question

有没有办法在css/less中动态添加top？我有以下结构：

.a2a-desktop-right {
right: 0px;
.a2a_svg {
position: absolute;
right: 8px;
}
}

.a2a_svg悬停时有一些动画效果，需要绝对定位，但是此元素可以有 n 种类型。每个人都需要比前一个多 40px 的顶部。有什么方法可以在没有 js 的情况下完成此操作？

编辑

我无法内联定义样式 - 它是生成这些元素的第三方脚本。这也是为什么 javascript 是不可能的 - 我不知道元素何时渲染，如果我这样做了，仍然需要时间来应用新样式。

Answer 1

在看到 edwinnwebb 的以下内容后，我设法找到了一种用less做到这一点的方法。

/* Define two variables as the loop limits */
@from : 0;
@to : 10;
/* Create a Parametric mixin and add a guard operation */
.loop(@index) when(@index =< @to) {
/* As the mixin is called CSS is outputted */
div:nth-child(@{index}) {
top: unit(@index * 100, px);
}
/* Interation call and operation */
.loop(@index + 1);
}
/* the mixin is called, css outputted and iterations called */
.loop(@from);
/*
## Output
div:nth-child(0) {
top: 0px;
}
div:nth-child(1) {
top: 100px;
}
div:nth-child(2) {
top: 200px;
}
div:nth-child(3) {
top: 300px;
}
div:nth-child(4) {
top: 400px;
}
div:nth-child(5) {
top: 500px;
}
div:nth-child(6) {
top: 600px;
}
div:nth-child(7) {
top: 700px;
}
div:nth-child(8) {
top: 800px;
}
div:nth-child(9) {
top: 900px;
}
div:nth-child(10) {
top: 1000px;
}
*/

应用于我的问题变成了...

@iterations: 0;
.svg-loop (@iterations) when (@iterations =< 5) {
.a2a-button.a2a-desktop-right:nth-of-type(@{iterations}) {
.a2a_svg{
top: unit((@iterations * 40) - 33, px);
}
}
.svg-loop(@iterations + 1);
}