Как (если возможно) в Stylus получить данные из JS объекта как например в Jade?

Question

[Alexey Sosnovsky]

всем доброго!
Изобретаю велосипед с социконками. Не так давно открыл для себя использование данных из 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. Если есть гуру по этому замечательному препроцессору, подскажите возможно ли такое на нём в принципе?

Answer 1

[Panya]

Для этого можно использовать встроенную функцию `json`

Comments

[Alexey Sosnovsky]

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

[Panya]

Alexey Sosnovsky: вот пример codepen.io/anon/pen/EPmWzR

[Alexey Sosnovsky]

собственно результат такой же как при моих попытках

SyntaxError in plugin 'gulp-stylus'
Message:
    /Users/ass/projects/sosnovskyas.ru/markup/modules/social/social.styl:1:67
   1| $data = json('data/data.json', { hash: true, leave-strings: true })
------------------------------------------------------------------------^
    2| 
    3| .social
    4|   list-style none
 Unexpected token '

Details:
    lineno: 1
    column: 67

[Panya]

Alexey Sosnovsky: а если без gulp-stylus попробовать через CLI? У меня все работает, Stylus 0.53.0 (последний)

[Alexey Sosnovsky]

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

[Panya]

Alexey Sosnovsky: я думаю, что просто используется более старая версия Stylus в gulp-stylus. Можно попробовать обновить (удалить nod_modules и поставить заново).