Question

我已经创建了一个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评估这些值呢？

Answer 1

这是语法错误。在JavaScript表达式中引用变量的正确语法是@{var_name}。您发布的代码中有{@var_name}。

Javascript中的LESS变量给出语法错误

1 个答案: