cssstylus

Dynamic Property Build Function in Stylus gives a expected ":", got "["


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?


Solution

  • Stylus currently doesn't support interpolation inside property values. You need to use () in this case:

    {types[type]}-{property}: (spaces[space])rem