在SCSS自動切換webkit前綴的線性漸變方向

我終於咬住了子彈並開始使用SCSS。爲什麼我不能更快地做到這一點？總之，在整個項目中，我使用水平線性漸變，所以我創造了這個混入：在SCSS自動切換webkit前綴的線性漸變方向

@mixin linear-gradient($direction,$left-color,$right-color) { 
    background: $left-color; // For browsers that do not support gradients 
    background: -webkit-linear-gradient($direction,$left-color,$right-color); // Safari 5.1-6 note direction is opposite 
    background: -o-linear-gradient($direction,$left-color,$right-color); // Opera 11.1-12 
    background: -moz-linear-gradient($direction,$left-color,$right-color); // Fx 3.6-15 
    background: linear-gradient(to $direction,$left-color,$right-color); // Standard 
}

此作品一種享受，但是，你會發現，WebKit的前綴線只需使用$方向。事實上，它應該與所指定的方向相反，以獲得一致的結果。因此，在webkit行中指定左側，方向實際上是右側。

我見過很多更復雜的方法來將總體解決方案應用於背景漸變，但這對我的項目來說似乎沒有必要。

有人能告訴我如何正確地寫一些類似於@if @else語句的東西，它會自動將方向從左向右轉換，反之亦然？

來源

2017-07-13 morgyface

如果你想使用@mixin那麼你需要一些if/else語句（你可以使用簡寫if）。但是也許現在是時候進一步去看看autoprefixer？然後，您可以編寫純粹的CSS，該腳本將爲您提供瀏覽器支持！ :)

UPDATE：如果要覆蓋所有的可能性（top，bottom和對角線

@mixin linear-gradient($direction, $left-color, $right-color) { 
    $legacy-direction: if($direction == left, right, left); 
    background: $left-color; // For browsers that do not support gradients 
    background: -webkit-linear-gradient($legacy-direction, $left-color, $right-color); // Safari 5.1-6 note direction is opposite 
    background: -o-linear-gradient($legacy-direction, $left-color, $right-color); // Opera 11.1-12 
    background: -moz-linear-gradient($legacy-direction, $left-color, $right-color); // Fx 3.6-15 
    background: linear-gradient(to $direction, $left-color, $right-color); // Standard 
}

：

如果你想只覆蓋left/right方向你可能不喜歡這樣像top right）那麼它會更復雜一點。在這裏你有一個示例解決方案：https://gist.github.com/ykhs/3690526

來源

2017-07-13 15:09:08 norin89

感謝@ norin89的迴應，我想我正在尋找的是如何編寫if/else來處理我的示例的具體答案。我知道我需要一些說_if方向剩下，然後顯示right_。我只是不確定如何寫這個。我會看看autoprefixer，聽起來很有希望。 – morgyface

請看我對答案的更新。 – norin89

這正是我要找的： '$ legacy-direction：if（$ direction == left，right，left）;' 非常感謝@ norin89。 – morgyface

在SCSS自動切換webkit前綴的線性漸變方向

回答

相關問題