title: How to create and iterate over a list of media in sass?
body: <p>Good morning. I'm currently trying to write a rather simple mixin function for sass. All it's got to do, is accept a list of viewports/media-mixins, a list of factors to be applied, and a padding. The result is to be a css padding definition for all viewports. So basically it shall turn this:</p>
  
  <pre><code>.test {
      $factors: 1 2 3 4 5;
      $paddings: 1px 0 5px 0;
      @include media-paddings($all-medias, $factors, $paddings;
  }
  </code></pre>
  
  <p>into this:</p>
  
  <pre><code>@media (media-1-def) {
      .test {
          padding: 1px 0 5px 0;
      }
  }
  
  @media (media-2-def) {
      .test {
          padding: 2px 0 10px 0;
      }
  }
  .
  .
  .
  </code></pre>
  
  <p>My current test at sassmeister can be found <a href="https://gist.github.com/anderschbe/e905e15bb5ed9903a82f83a30a8d49e4" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Given that I just started out with sass, I'm still having problems with the following not-to-insignificant questions:</p>
  
  <p>1) How to create the list of media mixins @ line 52?
  2) How to call them in the loop @ line 27?
  3) How to build up a multi var padding in one iteration? Meaning not using my clumsy if construct @ lines 33 following nor two loops, first to generate the vars, and then add the vars to the padding.</p>
  
  <p>I know, for all you cracks this must seem trivial, so if you happen to know good tutorials or other sources to learn from, those are valued as well (searched for them, but classical case of brain-nullpointer on correct search-word).</p>