Sass函數構造一個URL

Question

我正在嘗試編寫一個返回URL的SCSS函數。 （所以我可以使用它像background-image: getURL(thing);）

困難的是我想插入參數，包括轉義的參數，例如， #應該變爲%23，因此它是URL安全的。

這種事情甚至可能與薩斯？

@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爲沒有alpha值的顏色返回一個十六進制表示。

你也許可以用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}); 
}