Wondering what the SCSS equivalent of LESS's escape is? - sass

Question

I'm converting a stylesheet from LESS to SCSS and for the most part it's gone smoothly but there's one issue: I can't seem to get one of my mixins to work.
Basically I haven't entirely jumped on the html5 bandwagon and I still use images for gradients for browser compatibility.
I wrote a PHP script to generate the gradients on the fly (yes, and cache them!) and then LESS takes care of linking to that when the mixin is called.
Anyway,
My old mixin (from LESS):
.verticalGradient(#startColor, #endColor, #height){
#tmpStartColor: escape("#{startColor}");
#tmpEndColor: escape("#{endColor}");
background: #endColor url('#{img_path}gradient/v/5px/#{height}/#{tmpStartColor}/#{tmpEndColor}.png') 0 0 repeat-x;
}
This is what I have so far for my new mixin (SCSS):
#mixin verticalGradient($startColor, $endColor, $height){
background: $endColor url('#{$img_path}gradient/v/5px/' + $height + '/' + $startColor + '/' + $endColor + '.png') 0 0 repeat-x;
}
So here's the issue:
Without being escaped, the url ends up being something like:
/img/gradient/v/5px/25px/transparent/#ffe4c4.png
It should be:
/img/gradient/v/5px/25px/transparent/%23ffe4c4.png
Of course, because of the hash tag, the server can only see up to transparent/ so it doesn't get the color information.
Stripping hash tags IS an acceptable solution if it can be done (although I'd prefer to just escape them as I was doing before), but I can't seem to find any way to do it.
Thanks!

Answer 1

I figured this out.
This got me pointed in the right direction:
How do I load extensions to the Sass::Script::Functions module?
And this got me the rest of the way there:
http://sass-lang.com/documentation/Sass/Script/Functions.html#adding_custom_functions
And here's my code if this is useful to anyone else :)
config.rb (require lib):
require File.dirname(__FILE__) + "/lib/urlencode.rb"
lib/urlencode.rb:
module Sass::Script::Functions
def urlencode(string)
Sass::Script::String.new(ERB::Util.url_encode(string));
end
declare :urlencode, :args => [:string]
end
Then it was just a matter of implementing in my stylesheet:
#mixin verticalGradient($startColor, $endColor, $height){
background: $endColor url('#{$img_path}gradient/v/5px/' + $height + '/' + urlencode($startColor) + '/' + urlencode($endColor) + '.png') 0 0 repeat-x;
}