SCSS mixins

I noticed a few bugs concerning mixins and @ attributes in SCSS. Some mixins works fine like the two below, but some of them just don't output the right content.

Here is the two mixins I use and works :

@mixin animation($args) {
  -webkit-animation: $args;
  animation: $args;
}
@mixin transition($args) {
  -webkit-transition: $args;
  transition: $args;
}

But for example this one doesn't at all :

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

Example :

@include keyframes(fadeIn) {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

Output :
@-webkit-keyframes {
  @content {
  }
}
@-moz-keyframes {
  @content 
  }
}
@keyframes {
  @content {
  }
}

And same issue for the @media, which are not mixins, but don't output the "content" or "title" exactly like the keyframes mixin right above

@media screen and (max-width: 1024px) {
    width: 100px;
    float: none;
}

Output :
@media {
}

I usually work with SASS, but for a particular project I have to use SCSS. I had a hard time switching to these { } and ; so I might be doing some mistake there, but I tried these codes in a codepen and they work as intended. It's just with this module that the output is messed up.

Any idea ?