Bootstrap 3 翻译 mixin答案

【问题标题】：Bootstrap 3 translate mixinBootstrap 3 翻译 mixin
【发布时间】：2015-01-14 09:29:36
【问题描述】：

如何在 translate mixin 上添加值？我想在 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%);

但我得到一个错误，有什么想法吗？？？

【问题讨论】：

对不起，伙计，我回答了这个问题，然后才意识到我可能完全误解了你，因为我看到一个 -50% 和一个 50% 在另一个地方有一个你想要添加的声明50%。您是否希望将翻译添加到已翻译的元素（或）我的解决方案是否解决了您的问题？
没关系，我明白了，我只需要一个真实的例子，而你提供了一个。发现！！谢谢！！

标签： twitter-bootstrap css less less-mixins

【解决方案1】：

注意： 使用 Less mixins 作为供应商前缀并不是一个好的做法，而且这个答案并没有尝试推荐它。它只对所提出的问题提供直接的答案。如果您有兴趣了解推荐的供应商前缀方法，请访问 Bass Jobsen 的 answer in this thread。

为什么你的 mixin 调用不起作用？

每当进行 mixin 调用时，只有在所有参数都有值（默认值或在 mixin 调用中传递的值）时，Less 才会调用 mixin。

在这种情况下，引导程序translate mixin 有 2 个参数（没有默认值），而 mixin 调用只有一个参数。因此，mixin 永远不会被调用/处理。

问题的解决方法是什么？

为了克服这个问题，您可以将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 轴上平移的输出（如 this simple sample 所示）。

下面是输出

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%);
}

【讨论】：

是的。我的反对意见只是为了平衡你和巴斯的答案。虽然您的回答总体上是完全正确且有用的，但关键是不推荐使用 Bootstrap 供应商 mixin，并且 OP 不应首先使用它们。

【解决方案2】：

@harry 接受的答案确实解决了您的问题，但共识是您应该使用（该）后处理自动前缀来设置您的供应商前缀以获得最佳实践。另见：LESS transition mixin with prefixes

Less 自动前缀插件位于：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"

上述命令指定了与默认 Bootstrap 构建过程相同的浏览器。您应该注意到，自 v3.2 起，Bootstrap 也使用了自动前缀。在检查 Bootstrap 的 less/vendor-prefixes.less 的来源时可以看到上述内容：

供应商前缀

由于引入了我们的 Gruntfile 中的自动前缀。它们将在 v4 中被移除。

【讨论】：