Nested @keyframes Rules

A handy feature in Sass 3.3 was the @at-root directive, which outputs nested Sass rules at the root of the CSS.

It was Stu Robson who came up with an awesome use case and example for @at-root when dealing with animations and @keyframes rules. Instead of creating keyframe rules at the root of the style sheet, we could nest them inside their modules with @at-root. Like this:

.bunny {
  animation: hop 2s ease-in-out infinite, 
             move 6s ease-out forwards;

  @at-root {
    @keyframes hop { 
      50%  { transform: translateY(40px); }
    }
    @keyframes move { 
      100% { left: 400px; }
    }
  }
}

I was excited about this feature because it made @keyframes rules easier to find, read and maintain.

No more @at-root

I recently discovered that Sass 3.4 automatically “@at-roots” nested keyframe rules. So now, instead of wrapping our @keyframes rules in an @at-root, we can nest them like regular Sass rules:

.bunny {
  animation: hop 2s ease-in-out infinite, 
             move 6s ease-out forwards;

  @keyframes hop { 
    50%  { transform: translateY(40px); }
  }
  @keyframes move { 
    100% { left: 400px; }
  }
}

… and Sass outputs them at the root level:

.bunny {
  animation: hop 2s ease-in-out infinite,  
             move 6s ease-out forwards;
}
@keyframes hop {
  50% {
    transform: translateY(40px);
  }
}
@keyframes move {
  100% {
    left: 400px;
  }
}

Sweet!