Generated by SassMeister.com.

input.scss

$spaces: (
  '6xl' : 152px,
  '5xl' : 136px,
  '4xl' : 104px,
  '3xl' : 88px,
  '2xl' : 56px,
  'xl'  : 40px,
  'l'   : 32px,
  'm'   : 24px,
  's'   : 16px,
  'xs'  : 8px,
);

@function space($name, $multiplier: 1) {
    @return map-get($spaces, $name) * $multiplier;
}

.with-tokens {
    margin: space(s) space(m) space(l, 3); // 16px 24px 96px
    padding: space(xs, .5) space(m, .5); // 4px 12px because sometime 8pt grid isn't enough…
    width: (space(xs) * 100); // 800px
}

// OR

$space-base: 8px !default;

@function space($multipliers, $base: $space-base) {
    $result: ();
    @each $multiplier in $multipliers {
        $result: append($result, $base * $multiplier);
    }
    @return $result;
}


.with-multiplier {
    margin: space(2 3 12); // 16px 24px 96px
    padding: space(.5) space(1.5); // 4px 12px because sometime 8pt grid isn't enough…
    width: space(100); // 800px
}

$space-base: 10px;

.with-base-10 {
    margin: space(2 3 12); // 20px 30px 120px
    padding: space(.5) space(1.5); // 5px 15px
    width: space(100); // 1000px
}

output.css

.with-tokens {
  margin: 16px 24px 96px;
  padding: 4px 12px;
  width: 800px;
}

.with-multiplier {
  margin: 16px 24px 96px;
  padding: 4px 12px;
  width: 800px;
}

.with-base-10 {
  margin: 20px 30px 120px;
  padding: 5px 15px;
  width: 1000px;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}