与其他混蛋混蛋

首先，除非您希望将变量视为字符串（在CSS输出中将字符串引用），否则您不想引用变量。将默认值作为“ else”的一部分而不是“ else if”的一部分是一个好主意。

您是在查看生成的CSS还是从Firebug之类的文件中查看它？因为如果我按原样复制/粘贴您的mixin，则会得到以下输出：

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

这是mixin的重构版本，其中所有引号和多余的“ px”已删除：

@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);
}

我得到以下输出：

.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;
}

这是仅用4行代码即可工作的mixin：

/*
 * Creates CSS triangle
 * direction options: top, right, bottom, left.
 * Example @include cssTriangle(bottom, red, 50px);
 */
@mixin cssTriangle($direction:left, $color:#89D4E7, $width:34px) {
    $opposite: nth((top,right,bottom,left), index((bottom,left,top,right),$direction));
    border: solid $width transparent;
    border-#{$direction}: none;
    border-#{$opposite}: solid $width $color;
}

是的，肯定存在某种优化的错误。但这有效

@mixin leftarrow($size:5px, $direction:left) {
  border-width: $size;
  border-color: transparent;
  border-style: solid;
  display: inline-block;
  height: 0px;
  width: 0px;

  @if $direction == "right" {
   border-left-color: $navbgblue;
   border-right-width: 0px;
 } @else if $direction == "left" {
   border-right-color: $navbgblue;
   border-left-width: 0px;
 } @else if $direction == "up" {
   border-bottom-color: $navbgblue;
   border-top-width: 0px;
 } @else if $direction == "down" {
   border-top-color: $navbgblue;
   border-bottom-width: 0px;
 }
}

.test{
  @include leftarrow(5px, up);
}

所以我会用它:-)