Question

有没有办法在CSS / less中动态添加顶部？我有以下结构：

.a2a-desktop-right {
    right: 0px;

    .a2a_svg {
        position: absolute;
        right: 8px;
    }
}

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

编辑

我无法内联定义样式-这是生成这些元素的第3方脚本。这就是为什么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);
}

动态添加顶部的CSS？

1 个答案: