你能在 SASS/SCSS CSS 中使用多個條件嗎

Question

我正在使用 SCSS 代碼來設置我的 ruby 應用程序的樣式，並且正在嘗試編寫自己的“圓角”mixin 來幫助解決多瀏覽器邊框的圓角問題。

目前我有以下內容：

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

但是，似乎 SASS 只能處理 if 語句中的一個條件？ 有沒有辦法解決這個問題，還是我必須為每個圓角做四個 if 語句？

Answer 1

您需要使用or而不是|| . 請參閱Sass 文檔。

此外，您似乎在每個塊的最后一個@if語句中有錯字：

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

Answer 2

我是這樣寫的：希望你會發現它有用。

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

}

你像這樣使用它：

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