Sass mixin with if else

Question

i have the following mixin

@mixin arrows($arrowdirection:\"left\", $arrowsize:\"5px\", $arrowcolor:$navbgblue ) {
            


        

Answer 1

First off, you don't want to quote your variables unless you want them to be treated as strings (strings get quoted in your CSS output). It's a really good idea to have your default value be as a part of an "else" instead of an "else if".

Are you looking at the generated CSS or looking at it from within something like Firebug? Because if I copy/paste your mixin as is, I get this output:

.test {
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top: "5pxpx";
  border-bottom: "5pxpx";
  border-right: "5pxpx" blue;
}

Here's a refactored version of your mixin with all the quotes and the extra "px" removed:

@mixin arrows($arrowdirection: left, $arrowsize: 5px, $arrowcolor: green) {
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;

    @if $arrowdirection == right {
        border-top: $arrowsize;
        border-bottom: $arrowsize;
        border-left: $arrowsize $arrowcolor;
    } @else if $arrowdirection == up {
        border-bottom: $arrowsize $arrowcolor;
        border-left: $arrowsize;
        border-right: $arrowsize;
    } @else if $arrowdirection == down {
        border-left: $arrowsize;
        border-right: $arrowsize;
        border-top: $arrowsize $arrowcolor;
    } @else {
        border-top: $arrowsize;
        border-bottom: $arrowsize;
        border-right:$arrowsize $arrowcolor;
    }
}

.test {
    @include arrows;
}

.test2 {
    @include arrows(right, 10px, blue);
}

I get the following output:

.test {
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top: 5px;
  border-bottom: 5px;
  border-right: 5px green;
}

.test2 {
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top: 10px;
  border-bottom: 10px;
  border-left: 10px blue;
}