如何簡化這個SCSS邊界半徑Mixin？ - 薩斯初級

我有以下SCSS混入爲此我可能寫太多冗餘的東西：如何簡化這個SCSS邊界半徑Mixin？ - 薩斯初級

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

}

注意，這個論點可以採取單一的價值，適用於所有的邊，或全部4定製。

來源

2011-11-14 Jacob

'$ bottomleft'變量應該設置爲'$ topright'作爲默認值，以防您使用速記聲明並且只傳遞兩個變量。因爲'border-radius：0 3px'相當於'border-radius：0 3px 0 3px'，而不是'border-radius：0 3px 0 0'。 – inko9nito

你可以第一個四行合併爲：

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

從

除此之外，如果你想保留的是能夠爲不同邊緣指定不同的值，並保持你的代碼跨瀏覽器兼容的選項，沒有什麼可以做的，以減少代碼了。

的moz-borer-radius

來源

2011-11-14 02:49:47 xbonez

使用標準的mixin DSL可能不需要做太多的事情，但可以通過一些有創意的[Sass腳本]（http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html）。 – numbers1311407

我建議的語法您使用

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

來源

2013-01-21 10:31:34 FDisk

你可以明確地傳遞值，就像這樣：

@mixin radius($radius) { 

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

傳遞參數，像這樣，

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

乾杯！

來源

2013-01-21 19:11:18 Devappended

-1

如果您使用taskrunner（如grunt）將您的sass文件轉換爲css，您可以使用autoprefixer添加所有供應商特定的前綴。

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

你可以擺脫混入的和只寫你想要圓角半徑的方式。

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

而這個不錯的小東西會將它轉換爲你，並且你最終會得到與你的mixin相同的輸出。

來源

2015-10-07 11:59:12 JasperZelf

你完全知道這是不是被問到的問題的答案。 – cimmanon

當我有完全相同的東西時，有人指出我選擇了這個選項，我很開心。對我而言，這是一個完美的答案。所以我想通過它。 – JasperZelf

但這不是這個問題的答案。「如何簡化這個mixin」並沒有通過「讓第三方應用程序爲你修復」來解答。 – cimmanon

如何簡化這個SCSS邊界半徑Mixin？ - 薩斯初級

回答

相關問題