twitter-bootstrap - Bootstrap 3 翻译混入

Question

如何在 translate mixin 上添加值？我想在 Y 坐标上有这些值:

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

Bootstrap 混合:

.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

Note: Using Less mixins for vendor prefixing is not good practice and this answer does not make any attempts to recommend it. It only provides a straight answer to the question that was asked. If you are interested in knowing the recommended approach for vendor prefixing, have a loot at Bass Jobsen's answer in this thread.

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

每当进行 mixin 调用时，如果所有参数都有值(默认值或在 mixin 调用中传递的值)，Less 只会调用 mixin。

在这种情况下， Bootstrap 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%);
}