Simplify the configuration of all available space variation

[titouanmathis]

Currently, the $spaces map definition depends on the $space-base definition :

$spaces-base: 8px / 16px * 1rem !default;
$spaces: (
  '0': 0,
  'x1': $spaces-base,
  'x2': $spaces-base * 2,
  'x3': $spaces-base * 3,
  'x4': $spaces-base * 4,
  'x6': $spaces-base * 6,
  'x8': $spaces-base * 8,
  'x10': $spaces-base * 10,
  'x13': $spaces-base * 13,
  'x16': $spaces-base * 16,
  'auto': 'auto',
) !default;

We can't override the $spaces map in a project's configuration file without redefining the $spaces-base variable before.

It would be nice to have a map only containing values without keys and let the space($value) function do the math:

$base: 8px;
$spaces: (
  0,
  1,
  2,
  3,
  4,
  auto,
);

@function space($space) {
  $index: index($spaces, $space);
  $value: nth($spaces, $index);

  @if (type-of($value) == 'number') {
    @return $value * $base; 
  } @else {
    @return $value;
  }
}

See this Codepen for a demo.

I will open a PR with these modifications, but do we consider them breaking changes or not? How could we handle legacy?

[perruche]

This is neat.

• Shall we convert $base to rem as in current state ?
• space is a reserve name ? To handle legacy where we use space('x2')

I guess this is a breaking change.

[titouanmathis]

@perruche in my example, the $base value is in pixels, but we will keep it in rem in the default configuration I think.

It seems that space is not reserved in Sass, and we could handle the legacy code in the @function space with warnings.

[perruche]

Yeah i was not refering to sass but to our codebase, which already contain the space function.

[titouanmathis]

I replaced it with the new one 😉

[titouanmathis]

Solved with the merge of the PR #10.