Pouvez-vous utiliser plusieurs conditions dans SASS / SCSS CSS

Je suis en utilisant SCSS code pour le style de mon application ruby et suis en train d'écrire mon propre "arrondi" mixin pour vous aider avec les multi-navigateur de frontière d'arrondi.

Actuellement j'ai le texte suivant:

@mixin rounded($corner: all , $radius: 8px) {
@if $corner==all || $corner==bottom || $corner == right || $corner==bottom-right{webkit-border-bottom-right-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==bottom-left{ -webkit-border-bottom-left-radius: $radius;}
@if $corner==all || $corner==top || $corner == right || $corner==top-right{ -webkit-border-top-right-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==top-left{ -webkit-border-top-left-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == right || $corner==bottom-right{ -khtml-border-radius-bottomright: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==bottom-left{ -khtml-border-radius-bottomleft: $radius;}
@if $corner==all || $corner==top || $corner == right || $corner==top-right{ -khtml-border-radius-topright: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==top-left{ -khtml-border-radius-topleft: $radius;}
@if $corner==all || $corner==bottom || $corner == right || $corner==bottom-right{ -moz-border-radius-bottomright: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==bottom-left{ -moz-border-radius-bottomleft: $radius;}
@if $corner==all || $corner==top || $corner == right || $corner==top-right{ -moz-border-radius-topright: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==top-left{ -moz-border-radius-topleft: $radius;}
@if $corner==all || $corner==bottom || $corner == right || $corner==bottom-right{border-bottom-right-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==bottom-left{border-bottom-left-radius: $radius;}
@if $corner==all || $corner==top || $corner == right || $corner==top-right{border-top-right-radius: $radius;}
@if $corner==all || $corner==bottom || $corner == left || $corner==top-left{border-top-left-radius: $radius;}
}

Cependant, il semble que SASS ne peut gérer qu'une conditionnelle dans le cas d'états? Est-il un moyen de les contourner cela ou dois-je faire quatre si les déclarations pour chaque coins arrondis?

source d'informationauteur Peter Hamilton | 2011-06-01

  1. 28

    Vous devez utiliser 'ou' au lieu de '||'. Voir la Sass Docs. Aussi, il semble que vous ayez une faute de frappe dans le dernier @instruction if pour chaque bloc: $angle==en bas doit être $angle==top

  2. 3

    Je l'ai écrit comme ceci: Espérons que vous le trouverez utile. 

    @mixin rounded($amount: "10px",$position: null) {
@if $position != null {
@if $position == "top" or $position == "bottom" {
// top or bottom 
-webkit-border#{$position}-left-radius: $amount;
-moz-border#{$position}-left-radius: $amount;
border#{$position}-left-radius: $amount;
-webkit-border#{$position}-right-radius: $amount;
-moz-border#{$position}-right-radius: $amount;
border#{$position}-right-radius: $amount;
} @else {
// top-left or top-right or bottom-left or bottom-right
-webkit-border#{$position}-radius: $amount;
-moz-border#{$position}-radius: $amount;
border#{$position}-radius: $amount;      
}
} @else {
// ALL IF EMPTY
-webkit-border-radius: $amount;
-moz-border-radius: $amount;
border-radius: $amount; 
}
}

    Vous l'utilisez comme suit:

      @include rounded(); /*as default 10px on all corners*/
@include rounded(15px); /*all corners*/ 
@include rounded(15px, top); /*all top corners*/ 
@include rounded(15px, bottom); /* all bottom corners*/ 
@include rounded(15px, top-right); /*this corner only*/ 
@include rounded(15px, top-left); /*this corner only*/ 
@include rounded(15px, bottom-right); /*this corner only*/ 
@include rounded(15px, bottom-left); /*this corner only*/