МЕНЬШЕ смешивание для nth-child?

Я пытаюсь сделать LESS mixin, который даст мне этот результат:

.resource:nth-child(8n+1) { clear: left; }

У меня это до сих пор:

.wrap-every(@n) {
    &:nth-child(@n + "n+1") {  // parse error on this line
        clear: left;
    }
}

.resource {
    .wrap-every(8);
}

Но это дает ошибку синтаксического разбора на указанной строке

ParseError: непризнанный вход

Есть ли способ сделать это?

Ответы

Ответ 1

Меньше >= 1,4

вы можете сделать что-то вроде этого:

.wrap-every(@n) {
  &:nth-child(@{n}n + 1) {
        clear: left;
    }
}

это должно иметь желаемый результат. Без необходимых хаков.

в старых версиях Less

вы можете попробовать простую интерполяцию строк:

.wrap-every(@n) {
    @t: ~":nth-child(@{n}n + 1)";
    &@{t} {
        clear: left;
    }
}

а вывод CSS в обоих случаях должен быть примерно таким:

.resource:nth-child(8n + 1) {
  clear: left;
}