Grayscale not working with LESS

Question

I want to use the grayscale function but LESS keeps throwing this error and I don't see a mixin for grayscale or how to use it. Any help?

Error   148 Expected color in function 'grayscale'

 img {
     -webkit-filter: blur(2px) grayscale(1);
    -moz-filter: blur(2px) grayscale(1);
    -o-filter: blur(2px) grayscale(1);
    -ms-filter: blur(2px) grayscale(1);
    filter: blur(2px) grayscale(1);
 }

Answer 1

Try the following. LESS is probably not recognizing grayscale(1) as a valid function for itself, but also not seeing is as a property value, so that is when you need to use string interpolation to get LESS to compile nicely.

 img {
    @filterString: ~"blur(2px) grayscale(1)";

     -webkit-filter: @filterString;
    -moz-filter: @filterString;
    -o-filter: @filterString;
    -ms-filter: @filterString;
    filter: @filterString;
 }