Puede usar múltiples condicionales en SASS/SCSS CSS

Question

Estoy usando el código SCSS para diseñar mi aplicación de ruby ​​y estoy tratando de escribir mi propio mixin "redondeado" para ayudar con el redondeo de bordes de múltiples navegadores.

Actualmente tengo el siguiente:

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

Sin embargo, parece que SASS sólo puede manejar una condicional en las sentencias if? ¿Hay alguna forma de evitar esto o tengo que hacer cuatro declaraciones if para cada esquina redondeada?

Answer 1

Debe usar 'o' en lugar de '||'. Vea el Sass Docs. También parece que tienes un error tipográfico en la última instrucción @if para cada bloque: $ corner == bottom debe ser $ corner == top

Answer 2

Lo escribí así: Espero que lo encuentres útil.

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

} 

que lo utilice de esta manera:

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