I have the following Stylus code
spaces = {
none: 0,
xxx-small: .125,
xx-small: 25,
x-small: .5,
small: .75
medium: 1,
large: 1.5,
x-large: 2,
xx-large: 3
}
properties = top, right, bottom, left
types = {
m: margin,
p: padding
}
space()
for type in types
for property in properties
for space in spaces
.{type}-{property}--{space}
{types[type]}-{property}: {spaces[space]}rem
space()
I would like it to output something along the lines of:
.m-top--none {
margin-top: 0rem;
}
.m-top--xxx-small {
margin-top: 0.125rem;
}
etc
However I am being confronted with the error:
expected ":", got "["
Any ideas what I've done wrong here? If I take the {spaces[space]}rem
and just replace with 1000%
as an example, it seems to work?
Stylus currently doesn't support interpolation inside property values. You need to use ()
in this case:
{types[type]}-{property}: (spaces[space])rem