このSCSSボーダー半径を単純化する方法Mixin？ - サス初級

Question

私はおそらくあまりにも多くの冗長なものを書いていたため、次のSCSSのミックスインがあります。引数は、カスタマイズのためのすべての側面を申請する単一の値を取る、またはすべての4できる

@mixin radius($topleft, $topright: $topleft, $bottomright: $topleft, $bottomleft: $topleft) { 

    -moz-border-radius-topleft:  $topleft; 
    -moz-border-radius-topright: $topright; 
    -moz-border-radius-bottomright: $bottomright; 
    -moz-border-radius-bottomleft: $bottomleft; 
    -webkit-border-radius:   $topleft $topright $bottomright $bottomleft; 
    border-radius:     $topleft $topright $bottomright $bottomleft; 

} 

注意を。

Answer 1

あなたはに最初の4行を組み合わせることができます：あなたが異なるエッジのために別々の値を指定して、クロスブラウザの互換性、あなたのコードを維持することができるという選択肢を保持したい場合は、それとは別に

-moz-border-radius: $topleft $topright $bottomright $bottomleft; 

、もうコードを減らすことはできません。

私はあなたがあなたが明示的にそうような値渡すことができ

@import "compass/css3"; 
@include border-radius(3px); 

Answer 2

の構文：そうのような

@mixin radius($radius) { 

-webkit-border-radius: $radius; 
border-radius: $radius; 
} 

パス引数、

を

.selector { 
    @include radius(0 0 5px 5px); 
} 

乾杯！

Answer 3

使用することをお勧めmoz-borer-radius

Answer 4

タスクランナー（gruntのような）を使ってsassファイルをcssに変換すると、オートプレフィクサーを使ってすべてのベンダー固有のプレフィックスを追加できます。あなたはミックスインを取り除くと、ちょうどあなたがほしいとの国境半径を書く得ることができな方法

https://github.com/nDmitry/grunt-autoprefixer

。

border-radius: 3px 6px 6px 3px 

そしてこの素晴らしい小さなブツはあなたのためにそれを変換します、そして、あなたのミックスインと同じ出力で終わります。