всем доброго!
Изобретаю велосипед с социконками. Не так давно открыл для себя использование данных из JS объекта в Jade. В качестве примера - добавляешь в папочку data файлик data.js и в нём JS объект. Получается такая структура:
/blocks
| - myBlock.jade
| | - data
| |- data.js
в data.js чтонибудь типа
social: {
fb: {
link: 'https://www.facebook.com/'
},
vk: {
link: 'https://vk.com/'
},
gh: {
link: 'https://github.com/'
},
tw: {
link: 'https://twitter.com/'
}
}
например генерируем список таким образом
mixin social(data)
ul.social
each item in data
li.social__item: a(href='#{item.link}' target='_blank' title='#{item.title}' class='social__link_#{item.title}').social__link: .social__image(class='social__image_#{item.img}'): span.hidden #{item.title}
потом подключаем и используем
include ../social/social
mixin header()
header.header&attributes(attributes)
+social(social)
теперь внимание вопрос:
а можно ли подобным образом из того же файла использовать JS объект для генерации стилей с Stylus?
сейчас использую такую конструкцию
.social
list-style none
margin 0
padding 0
m-cf()
&__image
margin-left 24px
float left
&:first-child
margin-left 0
for item in (vk fb tw gh)
&_{item}
bg($ + item)
&:hover
// ничего умнее в голову не пришло как переписать переменную в переменной
item = item + '-hover'
bg($ + item)
span
display none
но хотелось бы при добавлении/удалении элементов JS объекта так же не прилагать никаких усилий в Stylus. Если есть гуру по этому замечательному препроцессору, подскажите возможно ли такое на нём в принципе?
Простой