title: How would I get $values that deep inside of list in SCSS?
body: <p>I want to call all values from each <code>$lists</code> of specific <code>$map</code> (<code>$value-tree</code> in this case.) and do to create media queries for that numbers.</p>
  
  <p>The <code>$map</code> what I have looks like this:</p>
  
  <pre><code>$breakpoints: (
      564
      768
      992
      1200
  );
  
  $value-tree: (
      width: (
          80%, 70%, 400px, 500px
      ),
      font-size: (
          20px, 30px, 40px, 50px
      ),
      color: (
          lightblue, orange, lime, crimson
      ),
      border: (
          1px solid black, 
          4px solid orange,
          7px solid brown, 
          10px solid lightblue  
      )
  );
  </code></pre>
  
  <p>And this is my code:</p>
  
  <pre><code>@mixin media-module($prefix, $properties...) {
      @each $names, $value in $properties {
          $myValue: map-get($names, $value);
          $myGrid: nth($breakpoints, $myValue);
          // doesn't work
          @media all and (min-width: $myGrid + px) {
              @each $names in $properties {
                  #{$names}: 123;     
              } 
          }
      }
  }
  </code></pre>
  
  <p>The main problem is these two directives, <strong>map-get</strong> and <strong>map-values</strong> can't call the <code>$values</code> from the <code>$lists</code>.</p>
  
  <p>used map-get directive to call the <code>$values</code>:</p>
  
  <blockquote>
    <p>Error: $map: "width" is not a map for 'map-get'
            on line 112 of scss/app.scss, in 'media-module'</p>
  </blockquote>
  
  <p>used map-values:</p>
  
  <blockquote>
    <p>Error: $map: "width" is not a map for `map-values'</p>
  </blockquote>
  
  <p>Is there any ways to get or call the values from the <code>$lists</code> that inside of <code>$map</code>?</p>
  
  <p>Many thanks always.
  <br><br><br><br>
  ================ UPDATE 12/6 ================</p>
  
  <p>I made it to create the numbers of media queries for each of the <code>$breakpoints'</code> values but it only calls width's values like this:</p>
  
  <pre><code>@media all and (min-width: 564px) {
    .qaz {
      width: 80%;
      display: 80%;
      border: 80%; } }
  @media all and (min-width: 768px) {
    .qaz {
      width: 70%;
      display: 70%;
      border: 70%; } }
  @media all and (min-width: 992px) {
    .qaz {
      width: 400px;
      display: 400px;
      border: 400px; } }
  @media all and (min-width: 1200px) {
    .qaz {
      width: 500px;
      display: 500px;
      border: 500px; } }
  </code></pre>
  
  <p>My second code looks like this:</p>
  
  <pre><code>@mixin mqg3($prefix, $properties...) {
      @each $contents, $dummy in $prefix, $properties {
          $myGroup: map-get($prefix, $contents);
          @each $values in $myGroup {
              $myIndex: index($myGroup, $values);
              $myGrid: nth($breakpoints, $myIndex);
              @media all and (min-width: $myGrid + px) {
                  @each $names in $properties {
                      #{$names}: $values;
                  }
              }    
          }
      }
  }
  </code></pre>
  
  <p>P.S</p>
  
  <p>Thanks for answer me @Jakob, but I want to make the <code>$properties</code> can be able to checked inside of <code>@include</code> so the user doesn't need to scroll up every time for checking the <code>$properties</code>:</p>
  
  <blockquote>
    <p>.qaz { @include mqg3($bp-values, width, display, border); }</p>
  </blockquote>