Working with !default and maps when creating a CSS framework

_lists.scss

@import "main";

$list-margin: $base-spacing-unit!default;

@mixin create-horizontal-list($name: 'ui-list') {
  #{$name} { 
    list-style: none;
    margin: 0;
    
    &__item {
      display: inline;
      
      &:after {
        content: ',';
      }
    }
  }
}

@include export('ui-list') {
  @include create-horizontal-list;
}

_nav.scss

@import "main"; // gives us access to the main framework features
@import "lists";

$nav-margin: $base-spacing-unit!default;

@mixin create-nav {
  $list-margin: $nav-margin;
  @include  create-horitzontal-list('nav');
  
  .nav {
    .nav__item {
      border-bottom: 1px solid;
      
      &:after {
        content : ' |';
      }
    }
  }
}

main.scss

$modules: ()!default;

$base-spacing-unit: 24px!default;
$base-ui-border-color: #dedede!default;
$base-ui-background-color: #f3f3f3!default;

@mixin export($name){
  @if index($modules, $name) == false {
    $modules: append($modules, $name);
    @content;
  }
}

I did wonder about looking into whether you could use conditional control statements in a component to do the merging and it does work, but only if you want to change or add to the default map. It is impossible to take away.

// Declared as a project global
$breakpoints: (
  alpha: 30rem,
  beta: 48rem,
  gamma: 60rem
);

// How we might handle the declaration in a component

$default-breakpoints: (
  alpha: 40rem,
  beta: 60rem,
  gamma: 70rem,
  delta: 80rem
);

@if variable-exists(breakpoints) {
  // if we have set some defaults we'd better merge them last
  $breakpoints: map-merge($default-breakpoints, $breakpoints);
} 
@else {
  $breakpoints: $default-breakpoints;
}

@each $name,$breakpoint in $breakpoints {
  @media screen and (min-width: $breakpoint) {
    .text { content: "#{$name}"; }
  }
}

// if we use this method, how do we override with fewer
// entries in the map?  i.e. the project only wants alpha and beta