I'm setting number of columns by passing @var
to my mix-in like this:
.author-card(@numberOfCards) {
width: 100% / @numberOfCards - 2%;
padding-bottom: 165% / @numberOfCards - 2%;
}
And I want to have a margin-right: 2%
for each column except for the last in row. So, I try to do the following:
.author-card(@numberOfCards) {
width: 100% / @numberOfCards - 2%;
padding-bottom: 165% / @numberOfCards - 2%;
margin-right: 2%;
&:nth-of-type(n * @numberOfCards) {
margin-right: 0;
}
}
At this point Less compiler fails to compile this.
Can I achieve this in Less? Maybe there is any other way to do this?
I get the following error:
ParseError: Unrecognised input in myStylesheet.less
To perform selector interpolation, you need to put the variable within curly braces like below:
.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;
}
}