How (if possible) in Stylus to get data from a JS object like in Jade?

Question

css

all the best!
Inventing a bicycle with social cons. Not so long ago, I discovered the use of data from a JS object in Jade. As an example, you add a data.js file to the data folder and a JS object in it. It turns out the following structure:
/blocks
| - myBlock.jade
| | - data
| |- data.js
in data.js something like

social: {
  fb: {
    link: 'https://www.facebook.com/'
  },
  vk: {
    link: 'https://vk.com/'
  },
  gh: {
    link: 'https://github.com/'
  },
  tw: {
    link: 'https://twitter.com/'
  }
}

for example, we generate a list like this

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}

then connect and use

include ../social/social
mixin header()
  header.header&attributes(attributes)
    +social(social)

Now attention to the question:
is it possible to use a JS object in a similar way from the same file to generate styles with Stylus?
I am currently using this design

.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

but I would like to add / remove elements of the JS object also without making any effort in Stylus. If there is a guru on this wonderful preprocessor, tell me if this is possible on it in principle?