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

Answer 4

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

您需要在调用@ 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);
}

强制用户提供默认或匹配参数，用户总是得到compin mixin。

Sass mixin with if else

5 个答案: