Sass mixin con si otra cosa

Question

Tengo el siguiente 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; 
    } 
} 

que para algunos (no obvia duda) razón se niega a trabajar si yo uso, ya sea por defecto o pasar algo en

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

solo me dan la CSS

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

así que mi if/else es de alguna manera no patadas en. ¿por qué por favor?

Answer 1

Sí, definitivamente hay un error de algún tipo, con la optimización. Pero esto funciona

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

por lo que voy a utilizar :-)

Answer 2

En primer lugar, no desea citar las variables a menos que desee que sean tratadas como cadenas (las cadenas se cotizan en su salida de CSS). Es una muy buena idea que su valor predeterminado sea como parte de un "else" en lugar de un "else if".

¿Está mirando el CSS generado o mirándolo desde algo como Firebug? Porque si copiar/pegar el mixin como es, me da este resultado:

.test { 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-top: "5pxpx"; 
    border-bottom: "5pxpx"; 
    border-right: "5pxpx" blue; 
} 

Aquí hay una versión refactorizado de su mixin con todas las comillas y el "px" sea retirado:

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

I Obtenga la siguiente salida:

.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

Esto funcionó para mí. Uso de los atajos de frontera crear css mixta y puré de que entraba en conflicto con ella misma

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

• de pie sobre los hombros de http://css-tricks.com/snippets/css/css-triangle/ y @cinnamon

Answer 4

aquí está trabajando mixin con sólo 4 líneas de código:

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

Tiene que pasar el argumento $ arrowdirection coincidente mientras llama al @ mixin.But puede agregar @error (su mensaje) en @else co por separado ndition así: -

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

que obliga usuario para proporcionar predeterminado o argumento a juego y el usuario siempre conseguir mixin accedió.