SASS混合CSS動畫

Question

我對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; ，但這似乎也不起作用。

如何在變量中使用供應商前綴創建混合？

Answer 1

而不是使用

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

嘗試

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

但是在這種情況下，使用Compass確實會更好， Compass具有針對此類常見情況的一些寫得很好的mixin。

Answer 2

我最終在mixin中使用了@if語句，如本答案所述 。

在我的特定情況下，我擔心transform屬性，因為在2017年回答此問題時，我不再需要所有以前的供應商前綴。 只是-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;
}