How to throw an error in the LESS compiler

Question

Question

Is there any way to (programmatically) throw an error in the LESS compiler?

Why?

I have been fiddling around with mixin guards today, because I wanted to generate my CSS margin based upon element size and element count. I thought it would be cool to directly throw an error on compilation, when the elements won't fit in the wrapper.

Info: I am using the lessc compiler to compile my LESS code to CSS. I am not using any Javascript library to compile it on execution time.

LESS source

// Variables
@wrapper-small:  830px;
@wrapper-big:   1200px;

.col-fixed(@size, @count, @wrapper)  when ((@size*@count) <= @wrapper)
{
    width: unit(@size, px);
    margin-right: unit( (@wrapper - @count * @size) / (@count - 1), px);    
}

.test_col_fixed {
    // will fail the mixin guard and output no generated CSS        
    .col-fixed(340, 3, @wrapper-small);

    // would work if not in comment
    // .col-fixed(340, 3, @wrapper-big);
}

Generated CSS (small wrapper)

No output, because the code will not be generated due to the not matching mixin guard when ((@size*@count) <= @wrapper) // 3*340 <= 830 is false.

Generated CSS (with working solution, big wrapper)

.test_col_fixed {
    width: 340px;
    margin-right: 90px;
}

Guards don't give any errors. The compiler just silently skips them when condition is matched. [This](http://stackoverflow.com/questions/30556401/restrict-mixin-values/30556891#30556891) is a related thread but I don't think you could apply pattern matching for your case. The best would be to follow the last snippet in my answer (which is to check for a not condition and introduce an error deliberately). Or you could print a custom message and check for it in compiled CSS. — Harry, Jun 16 '15 at 10:35
Thank you for your suggestion, but the valid values and extract function won't help in this case. — Smamatti, Jun 16 '15 at 10:44
I wasn't referring to the valid values or extract snippets :) Please have a look at the final one with a deliberate error (`output: @bwahaha` part). That in my opinion is the only way you can make Less compiler fail when no guard is matched. — Harry, Jun 16 '15 at 10:46
Oh, my bad. That works now. You could post that as an answer. — Smamatti, Jun 16 '15 at 10:51
Ah, it would feel like I am duplicating my answer for rep :( If you like it, I wouldn't mind an upvote there :) — Harry, Jun 16 '15 at 10:53

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

Suggested, but strictly not recommended solution by Harry

.col-fixed(@size, @count, @wrapper) {
    & when ((@size*@count) <= @wrapper) {
        width: unit(@size, px);
        margin-right: unit( (@wrapper - @count * @size) / (@count - 1), px);  
    }
    & when ((@size*@count) > @wrapper) {
        /* there is no such variable and hence when the input value is not valid,
        compiler will complain that variable is undefined */
        output: @bwahahaha;
    }
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 16 '15 at 10:55

Smamatti

3,901
3
32
43

Good, I was about to suggest moving the solution from question to a self answer and thanks :) – Harry Jun 16 '15 at 10:58