在SASS/SCSS CSS中可以使用多个条件语句吗

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.

我正在使用SCSS代码来设计我的ruby应用程序，并试图编写自己的“圆形”mixin，以帮助实现多浏览器边界的四舍五入。

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?

然而，SASS似乎只能处理if语句中的一个条件?是否有一种方法来解决这个问题，或者我需要对每个圆角做4个if语句?

2 个解决方案

#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

你需要使用“或”而不是“||”。看到Sass文档。同样，您似乎在每个块的最后一个@if语句中都有一个错码:$corner=底部应该是$corner= top

#2

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

#1