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.