css - SASS mixin用于CSS动画

我对sass相当陌生，但是我试图将头放在创建有用的mixin上。

我正在尝试为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;的操作，但这似乎也不起作用。

如何在变量中使用供应商前缀创建混合？

最佳答案

而不是使用

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

尝试

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

但是在这种情况下，您最好使用Compass，它具有针对此类常见情况的一些写得很好的mixin。

关于css - SASS mixin用于CSS动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28201072/