How to use Sass mixin transition for applying transition-delay only?

Question

As I keep continue on learning front-end developing and practicing Sass with optimizing my CSS code I got stuck again in another case.

After doing research and tutorials on the internet I have set up in Sass as global mixin named ' transition '. The code looks like this:

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

Now, I want to apply only transition-delay for my span pseudo-elements (::before and ::after). Default CSS looks like this:

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

So there is my question. Is it possible to use my this definied mixin ' transition ' to pass only transition-delay as arguments?

I have tried:

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

but this will not work. I have tried to find solution in Sass documentation and find some tutorial online, no luck. No idea how to define properly my problem to search for the solution.

Anyone can please advice me?

Answer 1

You could use an approach in which you pass the property name as an argument to the 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)
}

Which gives compiles to the following 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; }