Bootstrap 3 翻译 mixin

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 .

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

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

在这种情况下，bootstrap translate mixin 有 2 个参数（没有默认值），而 mixin 调用只有一个参数。因此，mixin 永远不会得到 invoked/processed.

解决问题的方法是什么？

为了克服这个问题，您可以将 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%);
}

Answer 2

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

可以在以下位置找到 Less autoprefix 插件：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 构建过程相同的浏览器。你应该注意到 Bootstrap 从 v3.2 开始也使用了 autoprefixer。查看Bootstrap的less/vendor-prefixes.less:

的来源时可以看到前面的内容

Vendor Prefixes

All vendor mixins are deprecated as of v3.2.0 due to the introduction of Autoprefixer in our Gruntfile. They will be removed in v4.

Bootstrap 3 翻译 mixin

Bootstrap 3 translate mixin

css

less

twitter-bootstrap

less-mixins