Можете ли вы использовать несколько условных выражений в SASS/SCSS CSS?

Я использую SCSS-код для стилизации своего рубинового приложения и пытаюсь написать свой собственный "закругленный" 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 для каждого закругленного угла?

Ответы

Ответ 1

Вам нужно использовать 'или' вместо '||'. См. Sass Docs. Также похоже, что у вас есть опечатка в последнем операторе @if для каждого блока: $corner == bottom должен быть $corner == top

Ответ 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*/