引导3翻译混音

Question

如何在转换混合器上添加值？我希望在Y坐标上有以下值：

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

引导混合器：

.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
  -ms-transform: translate(@x, @y); // IE9 only
   -o-transform: translate(@x, @y);
      transform: translate(@x, @y);
}

如何在Y坐标上加50%？我试过：

.translate(@y: 50%);

但是我有个错误，有什么想法吗？

Answer 1

注意：在供应商前缀中使用较少的混音并不是很好的做法，这个答案并没有试图推荐它。它只对提出的问题提供了一个直截了当的答案。如果您对供应商前缀的推荐方法感兴趣，请访问Bass Jobsen的在这个线程中回答。

为什么你的混音呼叫不工作？

每当进行混音调用时，只有当所有参数都有一个值(默认值或在mixin调用中传递的值)时，才会调用mixin。

在这种情况下，引导translate混频器有两个参数(没有默认值)，而混合调用只有一个参数。因此，将永远不会调用/处理混音。

问题的解决方案是什么？

为了克服这一问题，您只需将0 (或0%)传递给@x参数，如

.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
  -ms-transform: translate(@x, @y); // IE9 only
  -o-transform: translate(@x, @y);
  transform: translate(@x, @y);
}

div{
  .translate(@x: 0%;@y: 50%);
}

这将产生一个输出，其实质上等同于仅在Y轴上的转换(如在这个简单的样本中所见)。

下面是输出

div {
  -webkit-transform: translate(0%, 50%);
  -ms-transform: translate(0%, 50%);
  -o-transform: translate(0%, 50%);
  transform: translate(0%, 50%);
}

它与等价于。

div {
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
}

Answer 2

“harry”所接受的答案确实解决了您的问题，但大家的共识是，您应该使用一个后处理自动修复程序来为最佳实践设置供应商前缀。另见：减少带前缀的过渡混合

较少的自动修复插件可以在：https://github.com/less/less-plugin-autoprefix上找到。

安装完之后，您可以运行：

echo "div {transform: translateY(-50%);}" | lessc - --autoprefix="last 20 versions"

上述产出：

div {
  -webkit-transform: translateY(50%);
     -moz-transform: translateY(50%);
      -ms-transform: translateY(50%);
       -o-transform: translateY(50%);
          transform: translateY(50%);
}

要与Boostrap兼容，您应该运行：

echo "div {transform: translateY(-50%);}" | lessc - --autoprefix="Android 2.3,Android >= 4,Chrome >= 20,Firefox >= 24,Explorer >= 8,iOS >= 6,Opera >= 12,Safari >= 6"

上面的命令指定了与默认的引导构建过程相同的浏览器。您应该注意到，自v3.2以来，Bootstrap也使用了自动修复器。在检查Bootstrap的less/卖主前缀的来源时，可以看到前面的内容。

供应商前缀 由于在我们的Gruntfile中引入了自动重定位器，所以所有供应商的混合器在v3.2.0中都被取消了。它们将在v4中删除。