Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (vundefined)
// Compass (vundefined)
// ----

$repo: pfe;

$pfe-vars: (
  container-spacer:              16px,
  container-padding:             16px,
  content-spacer:                24px,
  ui--element--size:             20px,
  ui--border-width:              1px,
  ui--border-style:              solid,
  ui--border-radius:             2px,
  modal: 99,
  navigation: 98,
  overlay: 97,
  content: 0
);
$pfe-colors: (
  // Palette of Border Colors
  surface--border:                    gray
);

  
@function pfe-var($cssvar, $category: '', $fallback: null, $map: $pfe-vars) {
    $cssvar-with-cat: $cssvar;

    @if $category !="" {
        $category: "#{$category}--";
        $cssvar-with-cat: "#{$category}#{$cssvar}";
    }
    // Start building the variable declaration
    $var-declaration: "--#{$repo}-theme--#{$category}#{$cssvar}";

    // If a fallback is defined, pass that in too
    @if $fallback == null {
        @if map-get($map, $cssvar-with-cat) != null {
            $fallback: map-get($map, $cssvar-with-cat);
        }
        @else if map-get($map, $cssvar) != null {
            $fallback: map-get($map, $cssvar);
        }
    }

    @if $fallback != null {
        $var-declaration: "#{$var-declaration}, #{$fallback}";
    }

    // Return the variable declaration string
    @return var(#{$var-declaration});
}

.foo {
  padding: #{pfe-var($cssvar: container-spacer)};
}
.bar {
  padding: #{pfe-var($cssvar: container-spacer, $category: header)};
}
.baz {
  padding: #{pfe-var($cssvar: container-spacer, $fallback: 12px )};
}
.qux {
  padding: #{pfe-var($cssvar: container-spacer, $category: header, $fallback: 12px )};
}
.autocomplete {
  --pfe-autocomplete--Border:  #{pfe-var(border-width, ui)} #{pfe-color(surface--border-width)};
  --test: #{pfe-var(modal)};
}

SassMeister-output.css

.foo {
  padding: var(--pfe-theme--container-spacer, 16px);
}

.bar {
  padding: var(--pfe-theme--header--container-spacer, 16px);
}

.baz {
  padding: var(--pfe-theme--container-spacer, 12px);
}

.qux {
  padding: var(--pfe-theme--header--container-spacer, 12px);
}

.autocomplete {
  --pfe-autocomplete--Border: var(--pfe-theme--ui--border-width, 1px) pfe-color(surface--border-width);
  --test: var(--pfe-theme--modal, 99);
}