title: Scss Button Mixin
body: <p>I've been trying to troubleshoot this for hours but I just don't understand what I'm doing wrong. Maybe it's not me and it's a glitch in codekit? I have built a scss button mixin. </p>
  
  <pre><code>@mixin btn ($background : blue, $textcolor : $white, $size : medium, $fullWidth : false) {
          display: inline-block;
          width: auto;
          border: 0;
          border-radius: 4px;
          text-align: center;
          box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 1px 2px rgba(102,190,255,.75);
          color: $textcolor;
          text-decoration: none;
          @include font(normal);
          @include transition(box-shadow 150ms ease);
  
          &amp;:hover{            
              box-shadow: 0 0 4px rgba(0,0,0,.03), inset 0 -1px 2px rgba(102,190,255,0.75), inset 0 1px 2px rgba(0,0,0,0.5);
          }
          &amp;:active{
              box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px -1px 3px rgba(102, 190, 255, .5) inset, 0px 3px 2px rgba(0, 0, 0, 0.5) inset
          }
  
          // Background
          @if ($background == 'blue') {
  
              /* @include gradient(#1673b9, #125e97); */
              background: blue;
  
          } @else if ($background == 'grey') {
  
              /* @include gradient($grey-light, $grey-dark); */
              background: grey;
          }
  
          // Sizes
          @if $size == small {
  
          }
  
          @if $size == medium {
              height: 32px;
              line-height: 32px;
              padding: 0 18px;
              font-size: 14px;
          }
  
          @if $size == large {
  
          }
  
          @if $fullWidth == true {
              width: 100%;
              display: block;
          }
  
      }
  </code></pre>
  
  <p>The sizes and full-size conditionals work just fine. But the Background does not. It just doesn't do anything. For now the Scss that uses it is:</p>
  
  <pre><code>&lt;div id="main-header"&gt;
          &lt;a href="#" class="btn create"&gt;Create New Content&lt;/a&gt;
          &lt;a href="#" class="btn download"&gt;Download CSV&lt;/a&gt;
  &lt;/div&gt;
  
  .btn{
          &amp;.create{
              @include btn(blue);
          }
          &amp;.download{
              @include btn(grey);
          }
      }
  </code></pre>
  
  <p>With that, I should be seeing two different color buttons. The markup and Scss will be improved but this is what it is for testing purposes. It seems to work fine here: <a href="http://sassmeister.com/gist/da3707a3e03609f8991c" rel="nofollow">http://sassmeister.com/gist/da3707a3e03609f8991c</a></p>
  
  <p>Any help or suggestions will be greatly appreciated. Thanks!</p>
  
  <p>Oh, as I looked over this question, I noticed I pasted the mixin that has @if ($background == 'blue'){  I have tried that without single quotes and without parentheses.</p>