你可以在SASS/SCSS CSS中使用多個條件：

我使用SCSS代碼來設計我的ruby應用程序樣式，並且正在嘗試編寫自己的「圓形」mixin以幫助實現多瀏覽器邊框舍入。你可以在SASS/SCSS CSS中使用多個條件：

目前，我有以下幾點：

@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只能處理中，如果在語句一個條件？有沒有辦法解決這個問題，或者如果每個圓角都有四個陳述，我必須做四個問題嗎？

來源

2011-06-01 Peter Hamilton

您需要使用'或'而不是'||'。請參閱Sass Docs。另外，它看起來像你在每個塊的最後@if語句中有一個錯字：$ corner == bottom應該是$ corner ==頂部

來源

2011-06-01 19:38:34

正確的在這兩方面，三江源 – 2011-06-02 01:26:49

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

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

來源

2013-12-08 06:37:29 DevWL

更好的解決方案 – 2016-05-05 09:04:40

你可以在SASS/SCSS CSS中使用多個條件：

回答

相關問題