CSS Function in mixin - grayscale

Question

I'm trying to create a mixin for grayscaling an html element.

In CSS way, it should be :

filter: grayscale(50%);

My mixin :

@mixin grayscale_element($value) {
    -webkit-filter: grayscale($value);
    -moz-filter: grayscale($value);
    filter: grayscale($value);
}

My error :

Fatal error: Uncaught exception 'SassScriptFunctionException' with message 'SassNumber must be a SassColour
Source: -webkit-filter: grayscale($value)'

Problem is, in sass grayscale is already a function, and paramter should be a color.

Module: Sass::Script::Functions - Sass Documentation

How can I use these filter in a mixin ?

Note: I'm using phpsass.

Answer 1

If you just want to avoid the grayscale function being evaluated as a Sass function use string interpolation. Something like this:

filter: #{"grayscale(#{$value})"};

if $value is set to 50% the CSS output will be:

filter: grayscale(50%);

Demo