css - 如何使用 Sass mixin transition 仅应用 transition-delay？

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

所以这是我的问题。是否可以使用我定义的 mixin 'transition' 仅将 transition-delay 作为参数传递？

我试过:

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

但这行不通。我试图在 Sass 文档中找到解决方案并在网上找到一些教程，但没有成功。不知道如何正确定义我的问题来寻找解决方案。

谁能给我点建议？

Answer 1

您可以使用一种将属性名称作为参数传递给混合宏的方法

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