css - Twitter bootstrap.transition 的多重转换？

Question

我想在 Bootstrap v2.1.0 中为两个属性设置动画，

不透明度 和边距。

我试过:

.transition(opacity 0.5s, margin 0.25s);: 无输出
.transition('opacity 0.5s, margin 0.25s');: 无效的 CSS 输出
.transition(opacity 0.5s); .transition(margin 0.25s);:边距覆盖不透明度。

请注意，我使用的是 lessphp所以使用 JavaScript 正则表达式的解决方案将不起作用。

我知道我可以复制 mixin 并修改它以接受两个参数，但这看起来很老套，肯定有更好的方法吗？

Answer 1

两个选项(取决于 LESS 的版本)

LESS(1.3.3+)

less2css.org表明这适用于 LESS 1.3.2 的实验，但是 issue documentation似乎表明这是 a 1.4 release addition .

每当它变得有效时，在某些时候，分号被引入作为参数混合中可能的变量分隔符，同时仍然允许逗号。 ; 的存在导致逗号被视为不是 分隔变量，而是作为变量本身的值 的一部分(逗号分隔列表)。然后，这允许(到 quote the site)我们使用“虚拟分号创建 mixin 调用，其中一个参数包含逗号分隔的 css 列表”。

因此，下面的工作产生与上面相同的输出没有转义字符串(注意末尾的“虚拟”分号变量条目的右侧，在参数混合调用的右括号之前):

.transition(opacity 0.5s, margin 0.25s;);
                                      |
                                semicolon here

LESS(1.3.3 之前的版本，但也适用于更高版本)

对传入的变量进行字符串插值(~):

.transition(~"opacity 0.5s, margin 0.25s");

两种解决方案输出:

-webkit-transition: opacity 0.5s, margin 0.25s;
-moz-transition: opacity 0.5s, margin 0.25s;
-o-transition: opacity 0.5s, margin 0.25s;
transition: opacity 0.5s, margin 0.25s;