After inputting the less code below into :
@item-width: 120px;
@num-cols: 3;
@margins: 2 * 20px;
@layout-max-width: @num-cols * @item-width + @margins;
@media (min-width: @layout-max-width) {
.list {
width: @layout-max-width;
}
}
The resulting CSS shows:
@media (min-width: 3 * 120px + 40px) {
.list {
width: 400px;
}
}
An issue arises with the variable @layout-max-width producing an expression within the media query, which is not desired. However, it generates the correct value of 400px for the width property, which is what is intended in the media query as well.
Is there a defined syntax in LESS that allows me to achieve the desired outcome?
If not, are there any alternative methods to address this concern?