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

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