你能在 SASS/SCSS CSS 中使用多个条件吗

Posted 2023-03-06

【中文标题】你能在 SASS/SCSS CSS 中使用多个条件吗

【英文标题】：Can you use multiple conditionals in SASS/SCSS CSS

【发布时间】：2011-09-06 13:32:26

【问题描述】：

我正在使用 SCSS 代码来设置我的 ruby​​ 应用程序的样式，并且正在尝试编写我自己的“圆角”mixin 来帮助实现多浏览器边框的圆角。

目前我有以下：

@mixin rounded($corner: all , $radius: 8px) 
  @if $corner==all || $corner==bottom || $corner == right || $corner==bottom-rightwebkit-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-rightborder-bottom-right-radius: $radius;
  @if $corner==all || $corner==bottom || $corner == left || $corner==bottom-leftborder-bottom-left-radius: $radius;
  @if $corner==all || $corner==top || $corner == right || $corner==top-rightborder-top-right-radius: $radius;
  @if $corner==all || $corner==bottom || $corner == left || $corner==top-leftborder-top-left-radius: $radius;

但是，SASS 似乎只能处理 if 语句中的一个条件？有没有办法解决这个问题，还是我必须为每个圆角做四个 if 语句？

【参考方案1】：

您需要使用or 而不是||。请参阅Sass Docs。

此外，您在每个块的最后一个 @if 语句中似乎有错字：

$corner==bottom should be $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*/ 

【讨论】：

更好的解决方案