Как передать mixin param в nth-of-type в Less?

Question

Я устанавливаю количество столбцов, передавая @var на мой миксин вот так:

.author-card(@numberOfCards) {
    width: 100% / @numberOfCards - 2%;
    padding-bottom: 165% / @numberOfCards - 2%;
}

И я хочу иметь margin-right: 2% для каждого столбца, кроме последнего в строке. Итак, я пытаюсь сделать следующее:

.author-card(@numberOfCards) {
    width: 100% / @numberOfCards - 2%;
    padding-bottom: 165% / @numberOfCards - 2%;
    margin-right: 2%;
    &:nth-of-type(n * @numberOfCards) {
        margin-right: 0;
    }
}

На данный момент компилятор Less не может это скомпилировать.

Могу ли я достичь этого в Меньше? Может быть, есть другой способ сделать это?

Я получаю следующую ошибку:

ParseError: Нераспознанный ввод в myStylesheet.less

Answer 1

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

.author-card(@numberOfCards) {
    width: 100% / @numberOfCards - 2%;
    padding-bottom: 165% / @numberOfCards - 2%;
    margin-right: 2%;
    &:nth-of-type(@{numberOfCards}) { // note the change.
        margin-right: 0;
    }
}

Селекторная интерполяция - синтаксическая справка