Can Stylus interpolate a variable inside another variable?

Viewed 42

I'm trying to set up a mixin for a selector interpolation in Stylus to tweak the themes of an external website (Logseq), particularly the position of different objects in different divs. Here's a simplified version of my code for just list bullets (object) in two divs (area):

// selectors for bullets, as constants for different themes
content-list = '.content-list-1,.content-list-2'
sidebar-list = '.sidebar-list-1,.sidebar-list-2'

// positions of bullets, for tweaking
content-list-margin-top   : 0.4em
sidebar-list-margin-right : 0.1em

// the mixin for the interpolation in question
position(object, area)
  {{area}-list} // to be replaced with .sidebar-list-1,.sidebar-list-2
    position : relative
    top      : {area}-{object}-margin-top
    right    : {area}-{object}-margin-right

.bullet
  position(bullet, content)
  position(bullet, sidebar)

I'm basing this off of the example provided by the official documentation here and here:

border(side, args...)
    if side
        border-{side}  args
    else
        border args
mySelectors = '#foo,#bar,.baz'

{mySelectors}
  background: #000

However, my code gets an error at {{area}-list}, that the next block (after right : ...) expected : but got }.

I suppose that my use of {} is wrong, or that inserting a variable into another variable is impossible in the first place. I tried replacing {} with () as suggested here, but the error persists.

0 Answers
Related