Animate.scss – SASS 3.3 working its magic

This post is also up on medium.com.

You have probably heard of, or even tried, animate.css by Dan Eden. It has gathered quite a following on GitHub and has been used in many projects. If you have not heard about it, basically it is a collection of plug-and-play CSS-animations that you can just drop into your project to get things shaking, rotating and moving.

About SASS 3.3 and the new @at-root directive

If your not interested in the why and the what, just skip this part and head directly to the next section.

CSS is an easy and performant way to get animations on your website and I have used animation.css on quite a few projects. Well, actually I have used bits and pieces of it. The problem with CSS-animations is that they are pretty bulky and tend to add a lot of weight to your code, the full animation.css library is more than 3500 lines of code and weighs in at 50+ kb when minified. So the smart way to use it is to just copy and paste the parts you need.

A few GitHubbers have tried to solve that problem, the best implementation being animate.scss by Jackilyn. She split animate.css into scss-partials which are easily imported into your project on a file-by-file basis. So far so good.

But since SASS 3.3 came along and introduced @at-root there is now an even better way to accomplish a modular and easy to use animation library. What @at-root does it that it takes whatever rules written inside it and puts them in the global scope. That means that you can nest something inside a selector or a mixin and still output it to the global scope in the processed CSS-file. Example:

@mixin mixin-blue() {
    color: #00f;
    .invert {
        color: #fff;
        background-color: #00f;
    }
}

.blue {
    @include mixin-blue();
}

If we ran this through SASS it would result in this CSS:

.blue {
    color: #00f; 
}

.blue .invert {
    color: #fff;
    background-color: #00f; 
}

Nothing new so far. But if we take that same piece of SASS-code and alter it just a little bit, like this:

@mixin mixin-blue() {
    color: #00f;
    @at-root {
        .invert {
            color: #fff;
            background-color: #00f;
        }
    }
}

.blue {
    @include mixin-blue();
}

The resulting CSS will be:

.blue {
    color: #00f;
}

.invert {
    color: #fff;
    background-color: #00f;
}

Again, SASS 3.3 is required for this to work. In a trivial case like this it might not seem like such a big difference, but when we are dealing with @keyframe-animations the implications are huge. Another example:

@mixin mixin-keyframes() {
    @keyframe color {
        from {
            color: #00f;
        }
        to {
            color: #fff;
        }
    }
}

.animate {
    @include mixin-keyframes();
}

Compiles to:

@keyframe color {
    .animate from {
        color: #00f; 
    }
    .animate to {
        color: #fff; 
    } 
}

Which cannot be used for anything good. However, if we once again make use of @at-root, like this:

@mixin mixin-keyframes() {
   @at-root {
        @keyframe color {
            from {
                color: #00f;
            }
            to {
                color: #fff;
            }
        }
    }
}

.animate {
    @include mixin-keyframes();
}

The result is fundamentally different:

@keyframe color {
    from {
        color: #00f; 
    }
    to {
        color: #fff; 
    }
}

Et voilà, now that is something that we recognize and can make use of! With a single mixin we can now output both styles and keyframes for any given animation. For example, if we want to fade something out and up:

@mixin fadeOutUp() {
    animation: fadeOutUp 1s ease-out;

    @at-root {
        @keyframes fadeOutUp {
            0% {
                transform: translateY(0px);
            }
            100% {
                transform: translateY(-20px);
                opacity: 0;
            }
        }
    }
}

.fadeOutUp {
    @include fadeOutUp;
}

This turns into:

.fadeOutUp {
    animation: fadeOutUp 1s ease-out; 
}

@keyframes fadeOutUp {
    0% {
        transform: translateY(0px); 
    }
    100% {
    transform: translateY(-20px);
    opacity: 0; }
    }
}

Which is a fully working animation sequence! Sure it needs some vendor prefixing to be all it can be and that is exactly why I turned it into a library.

Animate.scss – it just works

With SASS 3.3 and animate.scss you can just import the fill animate.scss file into your project and and all the beauty of CSS-animations is suddenly at your fingertips. Only the parts that you include via mixin will end up in your actual CSS so there is no unnecessary bloating of your codebase and you don’t have to make any extra requests to load a stylesheet. Just import, include a mixin, compile and marvel at the power of CSS-animations.

Check out the project at https://github.com/hmps/animate.scss and give it a spin! If you have yet to install SASS 3.3 there are plenty of resources out there that can help you get it done.