Special characters causing problems when compiling LESS

Question

Has anyone had issues with LESS compiling CSS that utilizes plus signs [+] and/or greater than [>] symbols, whereas the inclusion of these causes compilation errors/fails? (we're using the standard lessc compiler). The LESS below is identical to what we're trying to compile - the first plus after banana.keynote is what sets the compiler error off:

.banana.keynote {
    + {
        label:before {
            border: 2px solid #CC6633 !important;
        }
    }
}
.banana.chunga {
    + {
        label:before {
            border: 2px solid #ffb5ff !important;
        }
    }
}
.banana.gordita {
    + {
        label:before {
            border: 2px solid #4067ea !important;
        }
    }
}

NOTE: admittedly, I'm using an online converter to go from CSS to LESS - could this be producing weird artifacts in code? Thanks.

Answer 1

Combinators in Less must always be followed by an element identifier, i.e. you can't use + alone on its own. Rewrite your code to:

.banana.keynote {
    + label:before {
        border: 2px solid #CC6633;
    }
}

If you really need to get it "alone" for some reason you may hack it through selector interpolaton:

@plus: ~'+';

.banana.keynote {
    @{plus} {
        label:before {
            border: 2px solid #CC6633;
        }
    }
}

---

P.S. Additionally note that the following code:

.banana.keynote + {
    label:before {
        border: 2px solid #CC6633;
    }
}

while compiled w/o any errors, does not produce the proper CSS (invalid + is just silently omitted).