2

如何在翻译 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%);

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

4

2 回答 2

4

注意：使用 Less mixins 作为供应商前缀并不是一个好的做法，这个答案并没有尝试推荐它。它只对所提出的问题提供直接的答案。如果您有兴趣了解推荐的供应商前缀方法，请查看 Bass Jobsen在此线程中的回答。

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

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

在这种情况下，bootstrap translatemixin 有 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 轴上的平移的输出（如在这个简单的示例中所见）。

下面是输出

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%);
}
于 2015-01-14T09:55:45.397 回答
2

@harry 接受的答案确实解决了您的问题，但共识是您应该使用（该）后处理自动前缀来设置您的供应商前缀以获得最佳实践。另请参阅：带有前缀的 LESS 过渡混合

可以在以下位置找到 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 中引入了 Autoprefixer，从 v3.2.0 开始，所有供应商的 mixin 都已弃用。它们将在 v4 中被删除。

于 2015-01-14T13:33:04.220 回答