Как вставить переменную из json в sass?

Question

[myskypesla]

Привет всем. Подскажите, как вставить переменную из JSON в SASS? Может быть кто-нибудь делал такое?

Такая ситуация: есть структура проекта, которая предполагает, что путь к первой картинке на первой странице будет таким:

background: url(assets/private/common/img/logo.png);

А путь ко второй картинке этой же страницы будет таким:

background: url(assets/private/page/img/avatar.png);

.

Что нужно сделать: Прописать в JSON все пути в определённые переменные, а в SASS прописать именно переменную, схематично будет выглядеть так:
1-ая картинка:
"переменная_№1_из_JSON": "assets/private/common";

background: url("переменная_№1_из_JSON"/img/logo.png);

2-ая картинка:
"переменная_№2_из_JSON": "assets/private/page";

background: url("переменная_№2_из_JSON"/img/logo.png);

Comments

[Алексей Уколов]

Почему именно json, почему не воспользоваться обычными переменными?

[myskypesla]

Т.к. эти переменные(пути) будут прописаны также и в html коде для файлов css и для js

[Alexander Belov]

myskypesla: Каким образом удалось решить задачу?

[myskypesla]

Alexander Belov: С помощью шаблонизатора Swig JS. Сделал в gulpfile.js переменную и в таске sass после функции gulp(sass()) поставил функцию gulp-swig, которая проходилась по распарсенному sass коду и подставляла вместо переменной значения. Только одна проблема, за почти год Swig шаблонизатор умер и больше не поддерживается :)

Answer 1

[sim3x]

https://github.com/vigetlabs/sass-json-vars

но я б не советовал заниматься такой фигней

js вообще не должен знать ничего про пути к картинкам
в css/sass не нужно переопределять пути к картинкам (максимум - переопределять пути при сборке)

*для общего развития - можно творить любую фигню, только зачем
https://css-tricks.com/making-sass-talk-to-javascr...

Comments

[smailenemy]

Мне как раз при сборке и нужно переопределить пути для который задана изначально переменная, чтобы если в проекте в будущем изменился путь, то можно было бы зайти и поменять всего 1 значение, а не лезть в css и менять там пути

[sim3x]

smailenemy:
первое что нагуглисось для таких целей
https://www.npmjs.com/package/gulp-css-url-adjuster

Answer 2

[Андрей Прозоров]

https://www.npmjs.com/package/gulp-json-css