title: SASS: Inheriting set variable from parent in mixin
body: <p>I have created a <a href="http://jsfiddle.net/northproject/Cm7NR/" rel="nofollow">jsFiddle</a> to demonstrate this issue. It's just an example.</p>
  
  <p><strong>What I'm doing</strong></p>
  
  <p>Let's say I'm making a flexible grid. My HTML looks like this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;a&lt;/p&gt;
      &lt;p&gt;b&lt;/p&gt;
      &lt;p&gt;c&lt;/p&gt;
      &lt;p&gt;d&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Four columns. I have two mixins and a global variable called <strong>$gutter</strong>. In my mixin, I call this variable to add gutters and change the widths.</p>
  
  <pre><code>$gutter: 1%;
  
  @mixin col($width){
      float: left;
      width: $width - ($gutter * 2);
      margin: 0 $gutter;
  }
  @mixin row(){
      width: 100%;
      overflow: hidden;
  }
  </code></pre>
  
  <p>I use it like so:</p>
  
  <pre><code>div { @include row(); }
  p { @include col(25%); }
  </code></pre>
  
  <p><strong>What I want to do</strong></p>
  
  <p>Now let's say I want to add a second, different grid to the page. I create this HTML and give each grid and ID to differentiate them:</p>
  
  <pre><code>&lt;div id="one"&gt;
      &lt;p&gt;a&lt;/p&gt;
      &lt;p&gt;b&lt;/p&gt;
      &lt;p&gt;c&lt;/p&gt;
      &lt;p&gt;d&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="two"&gt;
      &lt;p&gt;a&lt;/p&gt;
      &lt;p&gt;b&lt;/p&gt;
      &lt;p&gt;c&lt;/p&gt;
      &lt;p&gt;d&lt;/p&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><em>I want the second grid to have a different gutter width. Or, alternatively, no gutters.</em></p>
  
  <pre><code>#one { @include row(); }
  #two { @include row($gutter: 0); }
  </code></pre>
  
  <p>This obviously does not work. Because the number of columns can be variable, I cannot add this $gutter:0 declaration to each instance of @include col(). It breaks the DRY principle and eventually (in complicated layouts) becomes unmaintainable.</p>
  
  <p><strong>The question</strong></p>
  
  <p>How can I allow a variable set in one mixin to filter down to another (on a child element)? I am aware that I could simply do this:</p>
  
  <pre><code>@mixin row(){
      width: 100%;
      overflow: hidden;
      .col { etc etc etc }
  }
  </code></pre>
  
  <p>But the class name may not always be <em>.col</em>. Does this make sense? <strong>I want the col() mixin to inherit a variable I pass through to the row() mixin.</strong> How?</p>