Переменная SCSS в фоновом изображении с данными изображения SVG URI

Question

В следующем SCSS я хотел бы использовать переменную fg-color в пределах атрибута background-image.

$fg-color: #ff6464; 

i.icon-back { 
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff6464'/></svg>"); 
} 

На данный момент значение, переменной в просто повторяется в строке SVG, например, так:

fill='%23ff6464' 

Я хотел бы, чтобы это было автоматически обновляется всякий раз, когда переменная fg-color обновляется.

Как это сделать?

---

UPDATE:

Этот вход SCSS:

i.icon-back { 
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>"); 
} 

Выходы этот CSS:

i.icon-back { 
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>"); 
} 

... это точно так же - переменная не обрабатывается.

---

Примечание:

Я рассмотрел эти вопросы, которые кажутся похожими, но не то же самое:

• Creating a Data URI's from SCSS
• Using an Data URI SVG as a CSS background image

Answer 1

Во-первых, создайте функцию SASS. Это (аb) использует интерполяцию строки для преобразования цвета в строку, , а затем полоски первого символа (всегда должен быть «#„), и помещает“%23» на своем месте (URL закодирован форму «#») ,

@function url-friendly-colour($colour) { 
    @return '%23' + str-slice('#{$colour}', 2, -1) 
} 

Затем используйте функцию - но для того, чтобы он работал в строке, это необходимо интерполировать, используя #{}

i.icon-back { 
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{url-friendly-colour($fg-color)}'/></svg>"); 
} 

Оговоркой при таком подходе, конечно, является то, что он не будет работать с цветами , которые задаются по имени цвета вместо их шестнадцатеричного цвета.

E.g. #f00 работает, но red не будет.

Answer 2

Не ответ на ваш вопрос, но альтернативный способ добиться подобного результата во многих случаях (подумайте о простых одноцветных значках). Вы можете использовать CSS маску-образ как так:

i.icon-back { 
    background-color: $fg-color; 
    mask-image: url(url("data:image/svg…"); 
} 

Browser support for CSS masks отсутствует Край/IE на момент написания этой статьи.