sassmapsmodular-scalesass-maps

Creating values in SASS map for modular scale ms-range


What I am trying to do is

This code needs to product a variable that looks like this:

$ms-range:
1.2      20em,
1.333    30em,
1.618    40em,
1.8      50em,
2        60em;

I can't get the function to return the format I want. Perhaps a map-extend?! I don't know. I need a SASS master!

SASS:

$breakpoints: ( s: (320, 479), sm: (480, 767), m: (768, 1023), l: (1024, 1439), xl: (1440, null));


@function returnThatMap() {
    @each $name, $values in $breakpoints {
        @for $i from 1 through length($name) {
          $min: nth($values, 1);
          // if the last one
          @if ($i == length($name))  {
            @return 'calc($i * 1.2)  $min / 16 * 1em'
          }
          // if not the last one
          @else {
            @return 'calc($i * 1.2)  $min / 16 * 1em',
          }
        }
    }
}

$ms-range : returnThatMap() ;


// OUTPUT FORMAT NEEDED below!! (dummy numbers, but correct syntax - ie. number ' ' [number]em,number ' ' [number]em, number ' ' [number]em;)

// $ms-range:
//   1.2      20em,
//   1.333    30em,
//   1.618    40em,
//   1.8      50em,
//   2        60em;

SASSMEISTER LINK: http://www.sassmeister.com/gist/700f0721fd7940c84435cb1b5210f5d7


Solution

  • A couple of things I noticed that could do with some fixing

    I also don't fully grasp the purpose of your @if-@else statement as both contain the same code within their block @return 'calc($i * 1.2) $min / 16 * 1em'

    With my understanding of what you're trying to accomplish, the code should look like this

    breakpoints: (  s: (320, 479),
                    sm: (480, 767),
                     m: (768, 1023),
                     l: (1024, 1439),
                    xl: (1440, null));
    
    @function returnThatMap() {
      $map: ();
      @each $name, $values in $breakpoints {
        $min: nth($values, 1); //This assumes that the first value is always the minimum
        // $min: min($values...); //This in built function can find the minimum between two values as long as they are both integers and might be a better option
        $key: str-length($name) * 1.2;
        $value: ($min / 16) * 1em;
        $map: append($map, ($key $value), comma);
      }
      @return $map;
    }
    
    $ms-range : returnThatMap() ;
    
    @debug $ms-range; // 1.2 20em, 2.4 30em, 1.2 48em, 1.2 64em, 2.4 90em}
    

    Hope this helps