Sass与if-else混合在一起

我有下面的混音

@mixin arrows（$arrowdirection:“left”、$arrowsize:“5px”、$arrowcolor:$navbglue）{
宽度：0；
身高：0；
边框颜色：透明；
边框样式：实心；
@如果$arrowdirection==“right”{
边框顶部：$arrowsize+px；
底部边框：$arrowsize+px；
左边框：$arrowsize+px$arrowcolor；
}@else如果$arrowdirection==“left”{
边框顶部：$arrowsize+px；
底部边框：$arrowsize+px；
右边框：$arrowsize+px$arrowcolor；
}@else如果$arrowdirection==“向上”{
底部边框：$arrowsize+px$arrowcolor；
左边框：$arrowsize+px；
右边框：$arrowsize+px；
}@else如果$arrowdirection==“向下”{
左边框：$arrowsize+px；
右边框：$arrowsize+px；
边框顶部：$arrowsize+px$arrowcolor；
}
}

因为某种原因（毫无疑问是明显的）拒绝工作 如果我使用默认值或传入某些内容

.test{
@包括箭头（“左”、“5px”、“蓝色”）；
}

我只得到CSS

宽度：0；
身高：0；
边框颜色：透明；
边框样式：实心；

所以我的if/else不知何故没有起作用。

---

为什么请？

首先，你不想引用你的变量，除非你想把它们当作字符串（字符串在你的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”：

我得到以下输出：

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

---

是的，在优化方面，肯定存在某种缺陷。 但这是有效的

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

---

所以我会用它：-）

这对我来说很有效。使用边框快捷方式创建与自身冲突的混合和混合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;
    }
}

• 站在和肉桂的肩膀上

---

这里是仅使用4行代码的混音：

/*
*创建CSS三角形
*方向选项：顶部、右侧、底部、左侧。
*示例@include cstriangle（底部，红色，50px）；
*/
@混音角度（$direction:left，$color:#89D4E7，$width:34px）{
$CONVERTIVE:n（（上、右、下、左），索引（（下、左、上、右），$direction））；
边框：实心$width透明；
边框-#{$direction}：无；
边框-#{$contract}：实心$width$颜色；
}

调用@mixin时，您需要传递匹配的$arrowdirection参数。但您可以在单独的@else条件下添加@error（您的消息），如下所示：-

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

---

它强制用户提供默认或匹配的参数，用户总是在firebug和css中得到兼容的mixin.

，我可以发誓我已经尝试过了（最初）没有引号。仅在此作为最后手段：-）无论如何，当我粘贴你的mixin时，它可以工作，但是，它很大，但是，我得到以下输出

code

{边框底部：5px无；边框颜色：-moz使用文本颜色绿色-moz使用文本颜色透明；边框右侧：5px无绿色；边框样式：无实体；边框顶部：5px无；高度：0；宽度：0；}

code

这没有帮助，因为顺序错误。-有什么想法吗？我不确定问题出在哪里（注释吃代码格式也无济于事）。这也是Firebug的粘贴？因为

-moz use text color

不是有效的属性（它看起来像是从元素颜色继承边框颜色的表达式）.你能更新你的问题吗？别忘了选择答案，记住原来的问题已经回答了。

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