Question

I’m running lessc my.less my.css.

Code:

@background: #343434;

input[type='text'] { 
    border: 1px solid (@background-#222);
}

Fails providing this error

NameError: variable @background- is undefined in …

However,

input[type='text'] { 
    border: 1px solid (@background+#222);
}

Will work.

I have read about BOM, this is not the case. I have also checked that my less compiler is installed with latest nodejs. I also tried #222222. Out of ideas.

Answer 1

The - may be part of an identifier. This is why it tells you it can’t find the variable @background-. On the other hand the + is never part of an identifier and so less knows that the variable is @background. You just have to insert a space to get it working:

input[type='text'] { 
    border: 1px solid (@background -#222);
}