title: Sass mixin with if else
body: <p>i have the following mixin</p>
  
  <pre class="lang-css prettyprint-override"><code>@mixin arrows($arrowdirection:"left", $arrowsize:"5px", $arrowcolor:$navbgblue ) {
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      @if $arrowdirection == "right" {
          border-top: $arrowsize + px;
          border-bottom: $arrowsize + px;
          border-left: $arrowsize + px $arrowcolor;
      } @else if $arrowdirection == "left" {
          border-top: $arrowsize + px;
          border-bottom: $arrowsize + px;
          border-right:$arrowsize + px $arrowcolor;
      } @else if $arrowdirection == "up" {
          border-bottom: $arrowsize + px $arrowcolor;
          border-left: $arrowsize + px;
          border-right: $arrowsize + px;
      } @else if $arrowdirection == "down" {
          border-left: $arrowsize + px;
          border-right: $arrowsize + px;
          border-top: $arrowsize + px $arrowcolor;
      }
  }
  </code></pre>
  
  <p>which for some (no doubt obvious) reason refuses to work
  if i use either the default or pass something in</p>
  
  <pre class="lang-css prettyprint-override"><code>.test{
      @include arrows("left", "5px", "blue");
  }
  </code></pre>
  
  <p>i only get the CSS </p>
  
  <pre class="lang-css prettyprint-override"><code>width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  </code></pre>
  
  <p>so my if / else is somehow not kicking in.
  why please ?</p>