薩斯混入用，如果別人

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

首先，你不想引用您的變量，除非你想他們被視爲字符串（字符串會在你的CSS輸出的引用）。將默認值作爲「else」的一部分而不是「else if」是一個非常好的主意。

你看生成CSS或類似螢火蟲內看呢？因爲如果我複製/粘貼你的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 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

這裏只有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 5

您需要通過匹配$ arrowdirection參數而調用@ mixin.But您可以在單獨的@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); 
} 

其中強制用戶提供默認或匹配的參數，用戶總是得到complied mixin。

兩種螢火蟲和CSS