Question

我终于咬了一口，开始使用SCSS。我为什么不早点这样做？无论如何，在整个项目中我都使用水平线性渐变，所以我创建了这个mixin：

@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前缀行仅使用 $ direction 。实际上，它应该与指定的方向相反，以获得一致的结果。因此，在webkit行中指定了 left ，方向实际上是 right 。

我已经看到了将更全面的解决方案应用于背景渐变的更复杂的方法，但这似乎对我的项目来说是不必要的。

有人能告诉我如何正确地编写类似@if @else语句的内容，该语句会自动将方向从左向右转换，反之亦然？

Answer 1

如果您想使用@mixin，那么您需要一些if / else语句（您可以使用简写if）。但也许现在是进一步探讨autoprefixer的正确时机？然后你可以编写纯CSS，脚本将为你提供浏览器支持！：）

更新：

如果您只想涵盖left / right方向，可以这样做：

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

如果您想要涵盖所有可能性（top，bottom和对角线top right），那么它会更复杂一些。这里有一个示例解决方案：https://gist.github.com/ykhs/3690526

在SCSS中自动切换webkit前缀的线性渐变方向

1 个答案: