Question

I am using SCSS code for styling my ruby app and am trying to write my own “rounded” mixin to help out with multi-browser border rounding.

Currently I have the following:

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

However, it appears that SASS can only handle one conditional in the if statements? Is there a way round this or do I have to do four if statements for each rounded corner?

Answer 1

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