Adding a suffix to the variable in a mixin?

问题:

I have a mixin:

@mixin transition($duration) {
  -webkit-transition: all $durations ease-in-out;
     -moz-transition: all $durations ease-in-out;
      -ms-transition: all $durations ease-in-out;
       -o-transition: all $durations ease-in-out;
          transition: all $durations ease-in-out;
}

but in its current state it's broken because it's clearly going to look for a variable named $durations instead of $duration and then suffixing an s for seconds. Is there a way to pull this off?

回答1:

You need to use string interpolation:

@mixin transition($duration) {
  -webkit-transition: all #{$duration}s ease-in-out;
     -moz-transition: all #{$duration}s ease-in-out;
      -ms-transition: all #{$duration}s ease-in-out;
       -o-transition: all #{$duration}s ease-in-out;
          transition: all #{$duration}s ease-in-out;
}

.foo {
  @include transition(1);
}