SASS 混合 CSS 个动画

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，适用于诸如此类的常见情况。

Answer 2

我最终在我的 mixin 中使用了 @if 语句，如 in this answer 所述。

在我的特殊情况下，我担心 transform 属性，因为在 2017 年回答这个问题时，我不再需要所有那些以前的供应商前缀； just -webkit.

这是mixin：

@mixin transition($property, $duration, $timing-function, $delay) {
  @if ($property == 'transform') {
    -webkit-transition: -webkit-transform $duration $timing-function $delay;
    transition: -webkit-transform $duration $timing-function $delay;
    transition: transform $duration $timing-function $delay;
    transition: transform $duration $timing-function $delay, -webkit-transform $duration $timing-function $delay;
  } @else {
    -webkit-transition: $property $duration $timing-function $delay;
    transition: $property $duration $timing-function, $delay;
  }
}

这样使用：

div {
  color: red;
  @include transition(transform, 500ms, ease, 0);
}

将编译为：

div {
  color: red;
  -webkit-transition: -webkit-transform 500ms ease 0;
  transition: -webkit-transform 500ms ease 0;
  transition: transform 500ms ease 0;
  transition: transform 500ms ease 0, -webkit-transform 500ms ease 0;
}

SASS 混合 CSS 个动画

SASS mixing for CSS animations

css

sass