динамически добавить топ в CSS? - PullRequest
Новая
       8

динамически добавить топ в CSS?

0 голосов
/ 03 октября 2018

Есть ли способ динамически добавлять top в css / less?У меня есть следующая структура: 

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

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

.a2a_svg имеет некоторые эффекты анимации при наведении и должен быть абсолютно позиционирован, однако может быть n-типов этого элемента.Каждый из них нуждается в вершине на 40px больше, чем предыдущий.Есть ли способ сделать это без js?

EDIT

Я не могу определить встроенный стиль - это сторонний скрипт, который генерирует эти элементы.Вот почему о javascript не может быть и речи - я не буду знать, когда элементы будут отображаться, и если бы я это сделал, все равно потребовалось бы время для применения новых стилей.

1 Ответ

0 голосов
/ 03 октября 2018

Мне удалось найти способ сделать это с less, увидев ниже edwinnwebb . 

/* 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);
}
...