URLを構築するSass関数

Question

URLを返すSCSS関数を記述しようとしています。 （だからbackground-image: getURL(thing);のように使うことができます）

難しいことは、argsをエスケープすることを含む、難しいことです。 #は%23になりますので、URLセーフです。

Sassでもこのようなことが可能ですか？

@function getURL($name, $color: #ffffff) { 
    // ??? 
} 

// How I want it to work: 
getURL('foo'); 
    // returns: url("http://example.com/foo.png?color=%23ffffff") 

// And if possible, this would be cool 
// (accepting any color type, and turning it into a hex color): 
getURL('bar', rgb(255,0,0)); 
    // returns: url("http://example.com/bar.png?color=%23ff0000") 

Answer 1

あなたはwrite your own Ruby method URLエンコードと色変換を行うことができます。 Color#inspectは、アルファ値のない色の16進表現を返します。

SASSのstr- index/insert/slice functionsで非常に簡単なURLエンコードを行うことができます。

それは偽物の方が簡単な場合があります：

@function getURL($name, $color-hex-str: ffffff) { 
    @return url(http://example.com/#{$name}.png?color=%23#{$color-hex-str}); 
}