3

I am getting an error when I compile this code here with WINLess:

.icon-text-shadow (@icon-text-shadow: 0.0625rem 0.0625rem rgba(132, 108, 172, 1), 0.125rem 0.125rem rgba(132, 108, 172, 1);) {
    box-shadow: @icon-text-shadow;
    -moz-box-shadow: @icon-text-shadow;
    -webkit-box-shadow: @icon-text-shadow;
}

The error is:

ParseError: Unrecognised input in PATH\file.less on line 34, column 126

The column 126 is between the last ) and the first { I am rather new at this but I have searched everywhere and got no clue still what is wrong.

Thank you for any suggestions..

Adrian
  • 35
  • 1
  • 1
  • 6
  • This may be helpful - http://stackoverflow.com/questions/9231369/how-do-you-create-multiple-box-shadow-values-in-less-css?rq=1 – Josh Jul 29 '16 at 20:44
  • With Hex colors works fine it seems.. – Adrian Jul 29 '16 at 20:56
  • 1
    Seems like a compiler problem/bug but putting it within quotes and escaping should work - `@icon-text-shadow: ~"0.0625rem 0.0625rem rgba(132, 108, 172, 1), 0.125rem 0.125rem rgba(132, 108, 172, 1)"` like [here](http://less2css.org/#%7B%22less%22%3A%22.icon-text-shadow%20(%40icon-text-shadow%3A%20~%5C%220.0625rem%200.0625rem%20rgba(132%2C%20108%2C%20172%2C%201)%2C%200.125rem%200.125rem%20rgba(132%2C%20108%2C%20172%2C%201)%5C%22)%20%7B%5Cnbox-shadow%3A%20%40icon-text-shadow%3B%5Cn%7D%5Cna%7B.icon-text-shadow()%3B%7D%22%7D). I've avoided the prefixes but that wouldn't cause any problem. – Harry Jul 30 '16 at 04:27

4 Answers4

1

I think that must be a problem with the enumeration. Try this:

@icon-text-shadow-default: 0.0625rem 0.0625rem rgba(132, 108, 172, 1), 0.125rem 0.125rem rgba(132, 108, 172, 1);
.icon-text-shadow (@icon-text-shadow: @icon-text-shadow-default) {
    box-shadow: @icon-text-shadow;
    -moz-box-shadow: @icon-text-shadow;
    -webkit-box-shadow: @icon-text-shadow; 
}
Aureliano Far Suau
  • 6,531
  • 2
  • 22
  • 25
1

Looks like you just found an issue with the compiler.

Your code is perfectly fine and should work as expected. The culprit is the second rgba(132, 108, 172, 1). Delete that and it will work.

I played around a bit and it seems that this always happens when there is a comma separated list as parameter and any element of that list, that is not the first, contains a function call.

Workaround in Aureliano's answer.

Lucas S.
  • 2,303
  • 1
  • 14
  • 20
0

You're trying to parsing a string separated by commas without escaping it.

Try this:

.icon-text-shadow (@icon-text-shadow: ~"0.0625rem 0.0625rem rgba(132, 108, 172, 1), 0.125rem 0.125rem rgba(132, 108, 172, 1)") {
    box-shadow: @icon-text-shadow;
}

Note: There's no need to use vendor prefixes for box-shadow anymore.

ed1nh0
  • 1,532
  • 13
  • 17
0

Check file encoding. If it "UTF-8 with BOM" then LESS can't directly build it. Change encoding to plain UTF-8.

Anton Ilyin
  • 21
  • 1