我创建了一个 Javascript 表达式来根据我希望我的网格系统具有的一些期望的折叠特性来评估列的宽度,但是我的LESS代码给了我一个“语法错误”。这是我的代码:
.setColumnWidths(@maxcolumns, @num_cols, @min_resolution){
@media screen and(min-width: @min_resolution) {
.row {
.onecol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*1/{@maxcolumns})))`;
}
.twocol {
~ ` Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*2/{@maxcolumns}))) `;
}
.threecol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*3/{@maxcolumns})))`;
}
.fourcol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*3/{@maxcolumns})))`;
}
.fivecol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*5/{@maxcolumns})))`;
}
.sixcol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*6/{@maxcolumns})))`;
}
.sevencol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*7/{@maxcolumns})))`;
}
.eightcol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*8/{@maxcolumns})))`;
}
.ninecol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*9/{@maxcolumns})))`;
}
.tencol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*10/{@maxcolumns})))`;
}
.elevencol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*11/{@maxcolumns})))`;
}
.twelvecol {
width: ~ `Math.min(100%, (100% / {@num_cols}*Math.ceiling({@num_cols}*12/{@maxcolumns})))`;
}
}
}
}
在调用 mixin 时,上面的代码将允许“折叠”:
.setColumnWidths(12, 4, 420px);
在这里,我们声明列数应该是 4,最大列数是 12,这应该发生在屏幕宽度为 420px 时。
为什么这会失败,否则我如何使用 javascript 评估这些值?