Sass mixin 与 if else

Question

我有以下混入

@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 时传递匹配的$arrowdirection 参数。但是您可以在单独的@else 条件中添加@error(your message)，如下所示：-

$navbgblue: #587cd7;    
@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;
     } @else{
        @error('please provide correct direction [up,right,bottom,left]')
     }
    }

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

这会强制用户提供默认或匹配的参数，并且用户总是得到编译的 mixin。

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

@mixin arrows($arrowdirection: left, $arrowsize: 5px, $arrowcolor: green) {
    /*
     * Creates css arrows
     * direction options: top, right, bottom, left. (to match border-'direction' of css)
     * Example @include arrows(bottom, 12px, #f00);
     */
    width: 0;
    height: 0;
    @if $arrowdirection == top {
        border-left: $arrowsize solid transparent;
        border-right: $arrowsize solid transparent;
        border-bottom: $arrowsize solid $arrowcolor;
    } @else if $arrowdirection == right {
        border-top: $arrowsize solid transparent;
        border-bottom: $arrowsize solid transparent;
        border-left: $arrowsize solid $arrowcolor;
    } @else if $arrowdirection == bottom {
        border-left: $arrowsize solid transparent;
        border-right: $arrowsize solid transparent;
        border-top: $arrowsize solid $arrowcolor;
    } @else {
        border-top: $arrowsize solid transparent;
        border-bottom: $arrowsize solid transparent;
        border-right: $arrowsize solid $arrowcolor;
    }
}

• 站在http://css-tricks.com/snippets/css/css-triangle/ 和@cinnamon 的肩膀上

Answer 4

是的，优化后肯定存在某种错误。 但这行得通

@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 5

首先，您不想引用变量，除非您希望它们被视为字符串（字符串在您的 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;
}