v2.0.0-beta.208

New Features

• Multiplier unit x and config.baseUnit #316 _{^{51bf4a2 @BenSeage}}

  For example, with the default baseUnit: 4, the spacing scale 1x, 2x, … will be 4, 8, ….

  <div class="m:4x"></div>

  Generated CSS:

  .m\:4x {
      margin: 1rem;
  }

  How is 1rem calculated?

  4x = 4(multiplier)*4(base unit) = 16px, 16px / 16(root size) = 1rem

  So you don't need to define the spacing scale one by one:

  export default {
  -    variables: {
  -        spacing: {
  -            '1x': 4,
  -            '2x': 8,
  -            '3x': 12,
  -            ...,
  -            '40x': 160
  -        }
  -    }
  }