Less Compile Error Parseerror: Syntax Error on Line 1

LESS compile error ParseError: Syntax Error on line 1

Are you using SimpLESS as your LESS compiler? If so there's a bug where it can't read files encoded in UTF-8 with BOM. Just convert your file to UTF-8 without BOM and it will work.

Why am I getting a compile error in this less syntax?

A variable can contain a value (not arbitrary rules). So you can define

@headerbg: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAIElEQVQIHWP8DwQMQHD6yVcGBhDn1OMvIOo/A4wB4gAACZQd0vY42rMAAAAASUVORK5CYII=) repeat;

(Note the : after the variable name) And later use

#header {
  background: @headerbg;
}

Bootstrap ParseError: Syntax Error on line 648 in mixins.less:648:25 647

You have to update less to newer (for Bootstrap 3.1 and newer)

For those who use grunt, there's a magic

npm update --save

If problems with updating npm dependencies see How do I update each dependency in package.json to the latest version?.

Why am I getting this error message from WinLess?

As discussed in comments, this is not a problem with either WinLess or with Less itself. The problem is with the code that you had used for compilation. It was probably taken from an outdated source that is still using old syntax (which was deprecated a few years ago) and hence the compilation error.

The following are the errors that needed to be corrected:

The first two lines in code will produce a compilation error because @index variable is available only within the mixin loop and not outside of it. This is not at all required and may just have been a copy-paste error.
```
@waarde: -((38*@index)-38);
background-position: ~"@{waarde}px" 0;
```
Next, the selector interpolation syntax that is used is an outdated/deprecated one. The escaping, braces and quotes are not at all required in the latest version of the compiler. Instead of this,
```
(~".m_item@{index}"){...}
```
just the below is enough:
```
.m_item@{index} {...}
```
Finally, the loop itself has an error because the guard is checking for @index less than 0 but the input values for the mixin is both greater than 0 and hence the mixin will never get invoked. Also, the two mixin calls at the end is not required and they can be changed into just .lusGuardedMixin (5);.

Making all the above mentioned changes, the code available in this demo should compile fine without any errors in the latest compiler.

(Adding my comments and demo as an answer so as to not leave the question unanswered)

!Syntax Error: on line 3: expected one of @import *-@:.#

@import "/subdirectory/file.less";

You seem to be missing the semi-colon?

Why is this Less expression a syntax error depending on the math operation?

This is a very interesting case. The below code compiles fine and produces the expected output when --strict-math setting is turned on (--strict-math=on).

@Foo: 50px;
.someClass {
  width: calc(e('(100% - @{Foo}') - 5px);
}
.someClass {
  width: calc(e('(100% - @{Foo}') + 5px);
}

When strict math is turned off (which is, the default), both lines result in compiler error. Error message is given below and it is indicative of the fact that Less compiler is trying to perform math operations on values inside the calc function. This aggressive compilation is a known behavior of Less compiler.

OperationError: Operation on an invalid type

As confirmed by seven-phases-max in his comment, the behavior with the e() function (both when strict math is turned on and when it is turned off) is correct and error message also is as expected.

Ideally the same behavior as above should be seen for ~"" syntax also because it is a replacement of the e(). But unfortunately it doesn't seem to be. The code fails to compile irrespective of whether the strict math setting is enabled or not and the error message shown is the following:

ParseError: Could not parse call arguments or missing ')'

The error message indicates it is Parse Error and not an Operation Error. As seven-phases-max has indicated, it seems like the parser is not expecting an arithmetic operator to follow a value that is not a number and hence is throwing a parser error. The error message could've been more friendly :)

This problem happens only when the operator is + or * and not when it is - or /. When - or / is used, they can't always be considered as math operator (because - is used in prefixes and / is used in font property for line-height etc) and so compiler processes them as an identifier but + or * is invariably a math operator and so causes the issue. When - or / is used, it just results in string concatenation.

The below is the recommended way to fix this issue as it doesn't make the compiler to think that some kind of math operation has to be performed (and leaves it to the User Agent to handle as part of CSS):

@Foo: 50px;
.someClass {
  width: calc(~'(100% - @{Foo} - 5px');
}
.someClass {
  width: calc(~'(100% - @{Foo} + 5px');
}

Note: There is a missing close brace ()) within the calc functions but that is irrelevant to this case.

LESS compile error on individual bootstrap components

The components are dependent on the variables.less and mixins.less. You will need to include them when compiling any component (or even just the reset.less, since it uses the mixins).

LESS Compile Error With Media Query on older versions

These were probably all good suggestions, guys, so thank you. But I found out what the problem was in my case, anyway. It was that line, but it was the return in it. In other words, this crashed the compile:

@media only screen 
and (min-width: @menu-break-point){

}

But this did not.

@media only screen and (min-width: @menu-break-point){

}

This I figured out after having tried Koala, SimLess, CodeKit, Crunch, and other compilers. All doing the same thing when it got to that line. I should have checked that earlier, but I was stuck on the idea that it was the @media query.

Again, I didn't write the .less code I'm working with and this was my first venture into .less.

Less Compile Error Parseerror: Syntax Error on Line 1