spaceUnit mixin does not respect custom spacing scale

[danis039]

Hey guys,

Do we have a way of using the custom spacing scale defined in project globals when using the spaceUnit mixin? The default framework spacing scale values are currently hardcoded into the mixin:

// edit space unit on a component level
@mixin spaceUnit($space-unit) {
  --space-unit:  #{$space-unit};
  --space-xxxxs: calc(0.125 * #{$space-unit});
  --space-xxxs:  calc(0.25 * #{$space-unit});
  --space-xxs:   calc(0.375 * #{$space-unit});
  --space-xs:    calc(0.5 * #{$space-unit});
  --space-sm:    calc(0.75 * #{$space-unit});
  --space-md:    calc(1.25 * #{$space-unit});
  --space-lg:    calc(2 * #{$space-unit});
  --space-xl:    calc(3.25 * #{$space-unit});
  --space-xxl:   calc(5.25 * #{$space-unit});
  --space-xxxl:  calc(8.5 * #{$space-unit});
  --space-xxxxl: calc(13.75 * #{$space-unit});
  --component-padding: var(--space-md);
}

Thanks a lot for the amazing work, loving the framework 👏

[sebastiano-guerriero]

Hi Daniel, and thanks for the kind words!

At the moment, the only way would be overriding the mixin. For example, in your custom-style folder, you can create a new _mixins.scss file, and paste in it a modified version of the spaceUnit mixin. You would still need to hard code your custom spacing multipliers, though.

We're experimenting with other ways to tackle the compounding effect caused by Em units. For example, we're experimenting with a system based on Rem units, but with the same responsive capabilities of Em units.

[sebastiano-guerriero]

We've just pushed an update that allows you to edit the --space-unit variable on a component level. Editing the unit variable won't affect your spacing scale.

For example:

.component {
  // switch to spacing system based on Rem units
  --space-unit: 1rem;

  // increase component spacing by 1.2
  --space-unit: 1.2em;

  // decrease component spacing by 0.8
  --space-unit: 0.8;
}

More info here: https://github.com/CodyHouse/codyhouse-framework/releases/tag/v2.8.0