Sass mixin with if else

Question

我有以下mixin

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

对于一些(毫无疑问是显而易见的)原因,如果我使用默认值或传递内容,则拒绝工作

.test{
    @include arrows("left", "5px", "blue");
}

我只得到CSS

width: 0;
height: 0;
border-color: transparent;
border-style: solid;

所以我的if/else不知何故没有踢.为什么好吗？

Answer 1

是的,肯定有某种错误,优化.但这很有效

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

所以我会用那个:-)

Answer 2

这里只有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;
}

Answer 3

首先，除非您希望将它们视为字符串（字符串在您的 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;
}