Can you use multiple conditionals in SASS/SCSS CSS

I wrote it like this: Hope you will find it useful.

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

}

You use it like so:

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

You need to use or instead of ||. See the Sass Docs.

Also it looks like you have a typo in the last @if statement for each block:

$corner==bottom should be $corner==top

Tags:

Html

Css

Ruby

Sass