web-dev-qa-db-fra.com

Sass mixin avec if else

j'ai le mixin suivant

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

qui, pour une raison (sans doute évidente), refuse de travailler si j'utilise le paramètre par défaut ou passe quelque chose

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

je ne reçois que le CSS 

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

alors mon si/sinon est en quelque sorte pas de coups de pied . pourquoi s'il vous plaît?

sass
19
John Smith

oui, il y a certainement un bug, avec l'optimisation .

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

donc je vais utiliser ça :-)

28
John Smith

voici un mix de travail avec seulement 4 lignes de code:

/*
 * 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;
}
14
Andriy

Tout d’abord, vous ne voulez pas citer vos variables sauf si vous voulez qu’elles soient traitées comme des chaînes (les chaînes sont citées dans votre sortie CSS). C'est une très bonne idée d'avoir votre valeur par défaut comme faisant partie d'un "else" au lieu d'un "else if".

Examinez-vous le CSS généré ou depuis quelque chose comme Firebug? Parce que si je copie/colle votre mixin tel quel, j'obtiens ce résultat:

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

Voici une version refactorisée de votre mixin avec toutes les guillemets et le "px" supprimé:

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

Je reçois la sortie suivante:

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

Cela a fonctionné pour moi. L'utilisation de raccourcis de bordure crée des css mixés et en purée qui sont en conflit avec lui-même 

@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;
    }
}
1
Jason Lydon

Vous devez passer l’argument $ arrowdirection correspondant lors de l’appel de @ mixin.Mais vous pouvez ajouter @error (votre message) dans une condition séparée @else comme ceci: -

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

ce qui oblige l'utilisateur à fournir l'argument par défaut ou correspondant et l'utilisateur obtient toujours un mix conforme.

0
Ankit