title: Making nested maps with @each in SASS
body: <p>I have the following SASS working fine, which I'm using to try and make media query changes DRYer than they are for me right now. Aiming for some modularity or summat.</p>
  
  <pre><code>$perfect-fourth: 1.3333333333333;
  
  $ma-base: 16;
  $grandma-base: 18;
  
  $type-ratio: $perfect-fourth;
  
  $font-sizes: (
      ma: (
          xsmall: round($ma-base/$type-ratio),
          small: round($ma-base),
          medium: round($ma-base*$type-ratio),
          large: round($ma-base*$type-ratio*$type-ratio),
          xlarge: round($ma-base*$type-ratio*$type-ratio*$type-ratio)
      ),
      grandma: (
          xsmall: round($grandma-base/$type-ratio),
          small: round($grandma-base),
          medium: round($grandma-base*$type-ratio),
          large: round($grandma-base*$type-ratio*$type-ratio),
          xlarge: round($grandma-base*$type-ratio*$type-ratio*$type-ratio)
      )
      // With several more lists
  );
  
  @function size($size, $family-member:ma) {
      @return map-get(map-get($font-sizes, $family-member), $size);
  }
  </code></pre>
  
  <p>The idea is that I'll be calling, for instance:</p>
  
  <pre><code>// 'rem' and 'media' are functions I have defined elsewhere
  @include media($ma) {
    p { font-size: rem(size(medium));
  }
  @include media($grandma) {
    p { font-size: rem(size(medium, grandma));
  }
  </code></pre>
  
  <p>What I'm trying to figure out is how to generate those nested maps and put them inside of $sizes. Here's what I have right now:</p>
  
  <pre><code>$family-sizes: (grandkid:14, kid:16, ma:16, grandma:18);
  
  $font-sizes : (
      @each $family-member, $size in $family-sizes {
          $family-member: (
              xsmall: round($size/$family-ratio),
              small: round($size),
              medium: round($size*$family-ratio),
              large: round($size*$family-ratio*$family-ratio),
              xlarge: round($size*$family-ratio*$family-ratio*$family-ratio)  
          )
      };
  );
  
  @function size($size, $family-member:ma) {
      @return map-get(map-get($font-sizes, $family-member), $size);
  }
  </code></pre>
  
  <p>This, sadly, isn't working, and none of the other methods I've tried have worked. The @each directive seems to be working, but I'm stuck on putting those lists inside of a single list. Any tips or ideas? I'm thinking that map-merge might help, but I'm not sure how to implement it.</p>