Уменьшить количество CSS, генерируемого функцией SASS

Question

Я очень плохо знаком с (я полагаю) более продвинутыми функциями SASS. Ссылка на эту статью. Мне удалось создать настройку SASS, которая позволит мне легко создавать темы в темном режиме! Однако я хотел бы уменьшить количество создаваемого им CSS-кода и узнать, достиг ли я предела своих знаний или только на что способен SASS / CSS.

У меня есть эта карта"themes":

$themes: (
  light: (
    primaryOne: #f0f,
    primaryTwo: #0ff
  ),
  dark: (
    primaryOne: #000,
    primaryTwo: #111
  )
);

У меня есть следующие миксины / функции, которые были в основном взяты из статьи:

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {
    $theme-map: () !global;
    @each $key, $submap in $map {
      $value: map-get(map-get($themes, $theme), '#{$key}');
      $theme-map: map-merge($theme-map, ($key: $value)) !global;
    }

    @if $theme == dark {
      @media (prefers-color-scheme: dark) {
        @content;
      }
    } @else {
      @content;
    }

    $theme-map: null !global;
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

И, наконец, собственный миксин и класс, в котором я его использую. :

@mixin set-color-primary {
  @include themify($themes) {
    color: themed('primaryOne');
  }
}

.foo-container div {
  @include set-color-primary;
}

Наконец это генерирует CSS следующим образом:

.foo-container div {
  color: #f0f;
}

@media (prefers-color-scheme: dark) {
  .foo-container div {
    color: #000;
  }
}

Я надеялся, что смогу выжать еще несколько строк и получить что-то похожее на:

.foo-container div {
  color: #f0f;
  @media (prefers-color-scheme: dark) {
    color: #000;
  }
}

Это ограничение моего знания SASS или это невозможно в простом CSS?