罗盘多个 css 转换答案

【问题标题】：Compass multiple css transitions罗盘多个 css 转换
【发布时间】：2012-07-13 13:45:48
【问题描述】：

如何像 Jsfiddle 和 Compass 一样进行多个 css 转换？

我要做的是用 Compass 在下面基本编写这段代码。

-webkit-transition: top 0.3s ease-out, background .9s .5s ease-out; 
   -moz-transition: top 0.3s ease-out, background .9s .5s ease-out; 
     -o-transition: top 0.3s ease-out, background .9s .5s ease-out; 
        transition: top 0.3s ease-out, background .9s .5s ease-out;

【问题讨论】：

标签： css sass compass-sass css-transitions

【解决方案1】：

这就是你要找的吗？ http://compass-style.org/reference/compass/css3/transition/#mixin-transition

@include transition( top 0.3s ease-out, background .9s .5s ease-out );

【讨论】：

这仍然对您有用吗？我也想出了这个，但我得到的是transition: top 0.3s ease-out background .9s .5s ease-out;。它省略了逗号！这是一个已知的错误？ [我正在使用compass 0.13.alpha.12]
@marczking 不确定github.com/Igosuki/compass-mixins/issues/34 是否相关。如果我传入列表，它对我有用：`@include transition((top 0.3s ease-out), (background 0.9s ease-out));

【解决方案2】：

如果你使用 mixin 来定义你的转换并且你得到这个错误：

错误：mixin 转换只需要 1 个参数；给定 2

尝试将您的值括在括号之间，例如：

@include transition( (bottom .5s, background 2s) );

【讨论】：

这个问题是 Compass 特有的，它提供了一个不会产生这个错误的过渡 mixin。

【解决方案3】：

来自文档：
http://compass-style.org/reference/compass/css3/transition/#mixin-transition

这些年来可能发生了变化，但现在是这样的：

single-transition($property, $duration, $function, $delay)

请注意 $delay 是最后一个，而不是正确答案中它在最后一个之前的位置。

【讨论】：