CODEWITHSUNDEEP
sass
kwrl
kwrl

Reputation: 653

SCSS mixin error with SASS V3.4 (not with V3.3)

I've a problem with following code. Using https://www.sassmeister.com/ for testing I already realized, that it's ok with SASS Version 3.3 but not with Version 3.4. How should I change the code so it will work with the current version.

@mixin keyframes ($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }
  @keyframes $animation-name {
    @content;
  }
}

@include keyframes(move-up) {
    0% {
        top: 25px;
        opacity: 1;
      }

  100% {
    top: -50px;
    opacity: 0;
  }
}

The expected output - with V3.3 - should look like

@-webkit-keyframes move-up {
  ...
}

but with V3.4 I get the following

@-webkit-keyframes $animation-name {
  ...
}

Upvotes: 0

Views: 36

Answers (1)

llobet
llobet

Reputation: 2790

In SCSS v3.4 you can interpolate in @keyframes with #{}

@mixin keyframes ($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@include keyframes(move-up) {
    0% {
        top: 25px;
        opacity: 1;
      }

  100% {
    top: -50px;
    opacity: 0;
  }
}

Upvotes: 1

Related Questions