LESS Variable in Javascript Giving Syntax Error

Question

I've created a Javascript expression to evaluate the widths of columns based on some desired folding characteristics I want my grid system to have, but my LESS code gives me a "syntax error". Here is my code:

.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})))`;
            }
        }
    }
}

The above code will allow "folding", upon calling the mixin:

.setColumnWidths(12, 4, 420px);

Here, we are declaring that the number of columns should be 4, the maximum number of columns is 12, and that this should occur when the screen width is 420px.

Why is this failing, and how can I evaluate these values using javascript otherwise?

merv · Accepted Answer · 2012-08-22 06:58:03Z

2

It is a syntax error. The proper syntax for referencing a variable in a JavaScript expression is @{var_name}. You have {@var_name} in the code you posted.

answered Aug 22, 2012 at 6:58

merv

78.2k17 gold badges218 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1429980 Over a year ago

Tried this, but I'm now getting the following error: JavaScript evaluation error: Math.min(100, ((100 / 4*Math.ceiling(4*1/@{maxcolumns)})))`` So I took out the percentages to make sure it would work... but still no luck. Syntax is like so: .onecol { width: ~Math.min(100, (100 / @{num_cols}*Math.ceiling(@{num_cols}*1/@{maxcolumns}))); }

merv Over a year ago

@user1429980 Try Math.ceil() instead of Math.ceiling().

Collectives™ on Stack Overflow

LESS Variable in Javascript Giving Syntax Error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related