МЕНЬШЕ CSS - аргументы Mixin и Nth-Child - без цикла

Я пытаюсь написать аргумент less, который будет ассоциироваться с идентификатором # p0x1. Я хотел бы иметь возможность написать аргумент вроде

@ytrans = translateY(@argument * 2)

затем укажите это значение аргумента для каждого идентификатора.

#p0x1(@argument:3){@ytrans}

Однако я не могу сделать это с помощью css nth-child. Я видел только решения, которые решают эту проблему с помощью цикла. Есть ли более прямой подход к этому, как этот?

#p0x1 div:nth-child(1)(@argument:3){

Вот код, который у меня сейчас есть.

/*Cube Position 0,1*/

#p0x1 div:nth-child(1) {
  transform         : @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(2) {
  transform         : @top @zaxis @ytrans;  
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(3) {
  transform         : @back @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(4) {
  transform         : @bottom @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(5) {
    transform: @left @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}
#p0x1 div:nth-child(6)  {
    transform         : @right @zaxis @ytrans;
    background-image: linear-gradient(@gradient);
}

arguments css less css-selectors less-mixins
person Joseph Casey    schedule 24.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я наконец смог найти это решение с помощью блестящего индивидуального имени seven-phase-max, которое помог мне с моей предыдущей проблемой.

Мое решение

.coordinates(-2, 2);
     .coordinates(@min, @max) {
    .xcoor; .xcoor(@xcoor: @min) when (@xcoor <= @max) {
        .ycoor; .xcoor(@xcoor + 1);
    }
    .ycoor(@ycoor: @min) when (@ycoor <= @max) {
        @ytrans:translatey(@cubesize * @ycoor);
        @xtrans:translatex(@cubesize * @xcoor);
#p@{xcoor}x@{ycoor} div:nth-child(1) {
  transform: @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(2) {
  transform: @top @zaxis @ytrans @xtrans;   
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(3) {
  transform: @back @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(4) {
  transform: @bottom @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(5) {
    transform: @left @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
#p@{xcoor}x@{ycoor} div:nth-child(6)  {
    transform: @right @zaxis @ytrans @xtrans;
    background-image: linear-gradient(@gradient);
}
        .ycoor(@ycoor + 1);
    }
}

Вывод более 60 000 строк

Вот почему я люблю препроцессоры для CSS. Если у кого-то есть предложения по улучшению, я буду приветствовать их.

person Community    schedule 24.04.2015
comment
Извините, если я неправильно понял ваш вопрос, но в ответе по-прежнему используются циклы (два факта). - person Harry; 25.04.2015
comment
Вы совершенно правы. Мое невежество заставило меня поверить, что цикл будет менее эффективным при настройке каждого n-го дочернего узла. Это невежество было моей ошибкой. Тем не менее, было отмечено, что это чисто экспериментальный подход. Никто не должен использовать 60 000 строк для веб-приложения. - person Joseph Casey; 25.04.2015