用于 CSS 动画的 SASS mixin答案

【问题标题】：SASS mixing for CSS animations用于 CSS 动画的 SASS mixin
【发布时间】：2017-03-09 06:00:23
【问题描述】：

我对 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; 的事情，但这似乎也不起作用。

我将如何在变量中创建与供应商前缀的混合？

【问题讨论】：

您可以随时查看 compass 是如何做到的：github.com/Compass/compass/blob/stable/core/stylesheets/compass/…

标签： css sass

【解决方案1】：

而不是使用

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

试试

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

但在这种情况下，你最好使用Compass，它有一些写得很好的mixin，适用于诸如此类的常见情况。

【讨论】：

【解决方案2】：

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

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

这是混合：

@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;
}

【讨论】：