Add custom spacing scale

[jonnitto]

I would like to add a custom spacing scale, so that mt-lh-4 is possible, for example.

This is what I tried so far:

@theme {
  --spacing-lh: 1lh; /* first try */
  --spacing-lh-*: 1lh /* second try */
  --spacing-lh-*: calc(1lh * <number>); /* third… */
  --spacing-lh-*: calc(1lh * --value(integer)); /* Number four… */
}

No one of this four variants work. Is this even possible?

[wongjn]

You'd have the lh-4 as the suffix like:

@theme {
  --spacing-lh-4: …;
}

If you'd like it to be more dynamic:

@utility mt-lh-* {
  margin-top: calc(1lh * --value(integer));
}

But you'd have to do this for every set of utilities you'd like to extend.