Sass-Funktion zum Erstellen einer URL

Question

Ich versuche, eine SCSS-Funktion zu schreiben, die eine URL zurückgibt. (So ​​könnte ich es wie background-image: getURL(thing); verwenden)

Die schwierige Sache ist, ich möchte Argumente hineininterpolieren, einschließlich der Flucht der Argumente, z.B. # sollte %23 werden, so ist es URL-sicher.

Ist das überhaupt möglich mit 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

Sie könnten write your own Ruby method URL-Codierung und Farbkonvertierung durchführen. Es sieht so aus, als ob Color#inspect eine hexadezimale Darstellung für Farben ohne Alpha-Wert zurückgibt.

Sie können möglicherweise eine sehr einfache URL-Codierung mit SASS str- index/insert/slice functions machen.

Es könnte sein, leichter zu fälschen:

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