Can I remove or ignore a defined sass function? - ruby

Question

We are using Rails+Sprockets+Compass. Compass defines a linear-gradient function, which conflicts with the css function of the same name.
After our scss file does an #import "compass", is there a way to remove Compass's linear-gradient function so that I can insert a raw linear-gradient into css?
I know I can redefine the function, but I still can't figure out how to redefine it so that I can insert a raw linear-gradient. I want to remove the function entirely.
The problem is that we're migrating to libsass, which means that Compass's Ruby-based functions no longer work. So this
#import "compass";
.tmp {
button-background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
which I would like to be output as-is, compiles to this:
.tmp {
button-background: _linear-gradient_legacy(compact(to bottom), #fdefd4, #fdc154...);
}
where _linear-gradient_legacy is a Ruby-based compass function that will no longer be expanded under libsass.

Answer 1

Compass expects you to use the provided background and background-image functions whenever you use either of the gradient functions (linear/radial). This is how you get your prefixes. The reason why the functions involved are written in Ruby is so that you can get an SVG gradient for browsers that don't support gradients.
If you want absolutely none of that, just redefine the function like so:
#function linear-gradient($options...) {
#return #{'linear-gradient(#{$options})'};
}
Before redeclaring the function:
#import "compass/css3";
.foo {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
.bar {
#include background(linear-gradient(to bottom, #fdefd4, #fdc154));
}
Output:
.foo {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
.bar {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkZWZkNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZkYzE1NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdefd4), color-stop(100%, #fdc154));
background: -moz-linear-gradient(top, #fdefd4, #fdc154);
background: -webkit-linear-gradient(top, #fdefd4, #fdc154);
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
After:
#import "compass/css3";
#function linear-gradient($options...) {
#return #{'linear-gradient(#{$options})'};
}
.foo {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
.bar {
#include background(linear-gradient(to bottom, #fdefd4, #fdc154));
}
Output:
.foo {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
.bar {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
Otherwise, you'll have to implement your own versions of the Ruby functions in Sass.