Как передать параметр миксина в nth-of-type в Less?

Я устанавливаю количество столбцов, передавая @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 не может скомпилировать это.

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

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

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


person Aleksei Chepovoi    schedule 11.08.2014    source источник
comment
См. раздел Интерполяция селектора. Например. &:nth-of-type(@{numberOfCards}).   -  person seven-phases-max    schedule 11.08.2014


Ответы (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;
    }
}

Интерполяция селектора — справочник по синтаксису

person Harry    schedule 11.08.2014
comment
Гарри, можно ли здесь гнездиться? Например, у меня есть миксин внутри миксина, и я хочу передать @{numberOfCards} во вложенный миксин. Это возможно? Спасибо - person Aleksei Chepovoi; 11.08.2014
comment
@AlekseiChepovoi: я не уверен, правильно ли я понял ваш запрос, но, пожалуйста, проверьте эту демонстрацию помогает тебе. Здесь nth-of-type также заполняется с помощью параметризованного миксина. - person Harry; 11.08.2014
comment
Я уже нашел решение для моего конкретного случая. Во всяком случае, спасибо, например. - person Aleksei Chepovoi; 11.08.2014