如何使用Sass mixin过渡仅应用过渡延迟？

Question

在继续学习前端开发和练习Sass以及优化CSS代码的过程中，我又陷入了另一种情况。

在互联网上进行了研究和辅导后，我在Sass设置了名为“ transition ”的全局混合。 代码如下：

@mixin transition($args...) {
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  -webkit-transition: $args;
  transition: $args;
}

现在，我只想对我的span伪元素（:: before和:: after）应用transition-delay 。 默认CSS如下所示：

span::before, span::after {
  transition-delay: 0.5s, 0;
}

所以这是我的问题。 是否可以用我这个definied混入“ 过渡 ”只传递过渡延迟参数？

我努力了：

@include transition(delay: .5, 0s);

但这是行不通的。 我试图在Sass文档中找到解决方案，并在线找到一些教程，但是不走运。 不知道如何正确定义我的问题以寻找解决方案。

任何人都可以建议我吗？

Answer 1

您可以使用一种方法，将属性名称作为参数传递给mixin

@mixin transition($prop, $values...) {
  -moz-#{$prop}: $values;
  -ms-#{$prop}: $values;
  -o-#{$prop}: $values;
  -webkit-#{$prop}: $values;
  $prop: $values;
}

div {
  @include transition(transition, color 1s, background-color 1s, border-color 1s);
  /* transition shorthand property can animate multiple CSS properties */
}

p {
  @include transition(transition-delay, 0.5s)
}

可以编译以下CSS

div {
  -moz-transition: color 1s, background-color 1s, border-color 1s;
  -ms-transition: color 1s, background-color 1s, border-color 1s;
  -o-transition: color 1s, background-color 1s, border-color 1s;
  -webkit-transition: color 1s, background-color 1s, border-color 1s; }

p {
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s; }