如何使用Sass混合转换只应用转换延迟

Question

当我继续学习前端开发和优化CSS代码练习Sass时，我又遇到了另一个问题。

在网上做了研究和教程之后，我在Sass中设置了名为"transition"的全局混合。代码看起来像这样:

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

现在，我想只应用过渡延迟对于我的span伪元素(::before和::after)。默认的CSS是这样的:

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

这就是我的问题。是否有可能使用我的这个定义的mixin '过渡'只传递过渡延迟作为参数?

I have try:

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