CODEWITHSUNDEEP
csssass
Mike Perrenoud
Mike Perrenoud

Reputation: 67898

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?

Upvotes: 1

Views: 363

Answers (1)

cimmanon
cimmanon

Reputation: 68329

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

Upvotes: 2

Related Questions