title: Sass mixin to generate CSS properties from a map of maps
body: <p>I have a map of maps:</p>
  <pre class="lang-scss prettyprint-override"><code>$colors: (
      'yellow': (
          '10': #fcf4d6,
          '20': #fddc69,
          '30': #f1c21b,
          '40': #d2a106,
          '50': #b28600,
          '60': #8e6a00,
          '70': #684e00,
          '80': #483700,
          '90': #302400,
          '100': #1c1500,
          'hover': (
              '10': #f8e6a0,
              '20': #fccd27,
              '30': #ddb00e,
              '40': #bc9005,
              '50': #9e7700,
              '60': #755800,
              '70': #806000,
              '80': #5c4600,
              '90': #3d2e00,
              '100': #332600
          )
      )
      ...
  </code></pre>
  <p>My goal is to use a mixin that translates this to CSS properties, recursively.
  I feel like in any other language, this would be easy (maybe I don't know enough Sass).</p>
  <p>For example,</p>
  <pre class="lang-scss prettyprint-override"><code>html {
    @include my-mixin($colors);
  }
  </code></pre>
  <p>would translate to:</p>
  <pre class="lang-css prettyprint-override"><code>html {
    --yellow-10: #fcf4d6;
    --yellow-20: #fddc69;
    ...
    --yellow-hover-10: #f8e6a0;
    ...
  }
  </code></pre>
  <p>I have gotten as far as to build the property name only:</p>
  <pre class="lang-scss prettyprint-override"><code>@mixin define-css-properties($map, $name: &quot;&quot;) {
    @each $key, $value in $map {
      @if is-map($value) {
        @include define-css-properties($value, $name + &quot;-&quot; + $key);
      } @else {
        --#{$name + &quot;-&quot; + $key}: red;
      }
    }
  }
  </code></pre>