Consistent sibling spacing

spacing.less

/**
 * super easy consistent spacing between all siblings
 *
 * usage:
 * // in main.less
 * :root {
 *   .consistent-spacing();
 * }
 *
 * // somewhere you want to apply 32px vertical spacing
 * .foo {
 *   > * {
 *     .consistent-spacing(margin-top, 4, wide);
 *   }
 * }
 * 
 * // even 16px vertically everywhere
 * * {
 *   .consistent-spacing(margin-top, 3);
 * }
 */
.consistent-spacing() {
  * {
    // calculation for spacing
    --consistent-spacing: ~"calc(var(--spacing--normal) * var(--spacing-enabled))";

    // spacing-3 (16px), disabled by default
    .consistent-spacing(disabled, 3);
  }

  // all 1+n children that apply .consistent-spacing(rule)
  * + * {
    .consistent-spacing(enabled);
  }
};

// apply spacing to any of these properties
.consistent-spacing(@property)
  when (@property = margin-top)
  or   (@property = margin-right)
  or   (@property = margin-bottom)
  or   (@property = margin-left)
  or   (@property = padding-top)
  or   (@property = padding-right)
  or   (@property = padding-bottom)
  or   (@property = padding-left) {
    // degraded fallback for unsupported browsers
    @{property}: @spacing-3;
    @{property}: var(--consistent-spacing);
  }

// set custom spacing level (1-5) for a selector
// @example set margins for `.foo` children to 32px
// .foo > * {
//   .consistent-spacing(4);
// }
.consistent-spacing(@command)
  when (isnumber(@command))
  and not (get-unit(@command)) {
    @spacing: ~"spacing-@{command}";
    @spacing--wide: ~"spacing-@{command}--wide";
    --spacing--normal: @@spacing;
    --spacing--wide: @@spacing--wide;
  }

// set spacing to the normal (default) or wide (larger) calculations
.consistent-spacing(@type)
  when (@type = normal)
  or   (@type = wide) {
    --consistent-spacing: ~"calc(var(--spacing--@{type}) * var(--spacing-enabled))";
  }

// enable or disable spacing for a selector
.consistent-spacing(@flag)
  when (@flag = enabled) {
    --spacing-enabled: 1;
  }
.consistent-spacing(@flag)
  when (@flag = disabled) {
    --spacing-enabled: 0;
  }


// more than one rule can be applied at once
// @example set all children to 16px horizontally
// .foo > * {
//   .consistent-spacing(margin-left, 3);
// }
.consistent-spacing(@commands...)
  when (length(@commands) > 1) {
    @consistent-spacing-modifier = ~"";
    .each-command();
    .each-command(@iterator: 1) when (@iterator <= length(@commands)) {
      .consistent-spacing(extract(@commands, @iterator));
      .each-command((@iterator + 1));
    }
  }