Question

我对sass来说相当新，但我正在努力创造有用的mixins。

我正在尝试为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，这对于像这样的常见情况有一些写得很好的mixins。

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

用于CSS动画的SASS mixin

2 个答案: