title: SCSS Variables as @extend class
body: <p>My idea is that I would like to write silent classes for <code>input[type=text]</code>, <code>input[type="password"]</code> and <code>input[type=submit]</code>. I would then <code>@extend</code> them in a mixin by passing hem through as a variable. </p>
  
  <p>My parser is throwing this error;</p>
  
  <pre><code>Syntax error: Invalid CSS after "   @extend ": expected selector_sequence, was "$type;"
  </code></pre>
  
  <p>Here is my code;</p>
  
  <pre><code>%text {
      (text styling)
  }
  
  %password {
      @extend %text;
  }
  
  %submit {
      padding: .5em;
      background-color: $button-color;
      border: none;
      cursor: pointer;
      color: white;
      border: 1px solid darken($button-color, 20%);
      &amp;:hover {
          @include transition;
          background-color: darken($button-color, 10%);
      }
  }
  
  @mixin input($type) {
      margin-bottom: 1.5em;
      margin-left: 0;
      outline: none;
      @extend $type;
  }
  </code></pre>
  
  <p>Any help would be appreciated</p>