css - 用于 CSS 动画的 SASS 混合

Question

我对 sass 还很陌生，但我正在努力全神贯注地创建有用的混合宏。

我正在尝试为 transition 属性创建一个基本的混合，它将包括带有前缀的旧浏览器的回退。

我正在尝试使用这样的东西:

@mixin transition($property, $duration, $timing-function, $delay) {
    -webkit-transition: $property, $duration, $timing-function, $delay;
    -moz-transition: $property, $duration, $timing-function, $delay;
    -o-transition: $property, $duration, $timing-function, $delay;
    transition: $property, $duration, $timing-function, $delay;
}

但这显然不提供前缀，所以我尝试做类似 -webkit-transition: -webkit-$property, $duration, $timing-function, $delay;,但这似乎也不起作用。

我将如何着手创建一个带有供应商前缀的混合变量？

Answer 1

而不是使用

-webkit-transition:-webkit-$property, $duration, $timing-function, $delay;,

尝试

-webkit-transition: unquote('-webkit-' + $property) , $duration, $timing-function, $delay;

但在这种情况下，您最好还是使用 Compass对于像这样的常见情况，它有一些写得很好的 mixin。