Background gradient broken with libsass 3+

[sir-dunxalot]

Since updating libsass/node-sass combination, the background image mixin no longer works as expected.

// Input
@include background-image(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));

// Output
background-image: -owg(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));
background-image: -webkit(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));
background-image: -moz(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));
background-image: -o(linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669));
background-image: linear-gradient(left, #8ebcbe, #7aafd1, #b6707d, #cfb669);

Note, the prefix is attached to the parentheses, not hyphenated as expected:

-webkit(linear-gradient
# vs
-webkit-linear-gradient

I have tracked the issue to the background-image mixin. Specifically lines like this with background-image: -webkit($images); seem to be outputting as a string. is -webkit supposed to be a function?

I'm happy to put up a PR if I can have some guidance as to where the problem might be coming from.

[sir-dunxalot]

If I add the following above the @import "compass" the code will output correctly:

@function -owg($property) {
  @return -moz-#{$property};
}

@function -webkit($property) {
  @return -webkit-#{$property};
}

@function -moz($property) {
  @return -moz-#{$property};
}

@function -ms($property) {
  @return -ms-#{$property};
}

@function -o($property) {
  @return -o-#{$property};
}

[OnkelTem]

Function linear-gradient() is not implemented by compass-mixins btw.

[Igosuki]

This needs to be reimplemented in sass https://github.com/Compass/compass/blob/d5df161d0df7edc686e576b22412f437dd0590cc/core/lib/compass/core/sass_extensions/functions/gradient_support.rb#L373 for the function to be there.