Variables restructure

[notsure]

The following things should be done:

• spacings, font sizes and so on should only use one measure variant (rem)
• all variables should be a map
• all maps should provide a generic way to access the properties, either by index numbers or by name eg:

$va-spacing-map: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
) !default;

$va-spacing-map: (
  none: 0,
  sm: 0.25rem,
  md: 0.5rem,
) !default;

• all variable maps should have a function for easy access

$va-spacing-map: (
  xs: (
    0: 0,
    1: 0.5rem,
    2: 1rem
  ),
  md: (
    0: 0,
    1: 1rem,
    2: 2rem
  ),
  lg: (
    0: 0,
    1: 1.5rem,
    2: 3rem
  )
) !default;

@function va-spacing($size, $breakpoint: md) {
  @return map-get(map-get($va-spacing-map, $breakpoint), $size);
}

then use in project:

.foo {
  padding: va-spacing(1, lg); // Fetches 1.5rem for "lg" breakpoint
}