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:
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:
… and Sass outputs them at the root level:
Sweet!Tweet this article