在 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 语句（你可以使用 shorthand 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 前缀的线性渐变方向

In SCSS automatically switch direction of linear gradient for webkit prefix

css

sass

mixins