Easy-animation | Animation for Sass

Recently, Sass was hooked up for project reasons.

In fact, we used Less before Sass. However, some of the APIS provided by Less are a bit redundant, so it is difficult to use them. In the end, it is useless.

The reason why Sass is comfortable and easy to use is largely because of the existence of Compass. Compass provides rich enough APIs to make you feel that CSS writing is a pleasure.

But...

Compass does not support animation! That's right. It's the animation in CSS3! (At least I haven't found the Compass document after turning it over for a long time ...)

You may say, "register, you can use Sass @ mixin to encapsulate an animation method !"

Well, I thought so at first, and then I did the same...

 

---- Text split line ----

 

As a newbie to Sass, When I want an animation @ mixin, it must be:

{:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;}

Well, it seems that we have achieved the goal of implementing animation with Sass.

Then we can optimize the Code:

{:;:;:;:;:;}

In this way, the code is much more elegant (I feel good about myself ~).

 

This is the end of the article? Potholes ?!

 

Of course not! To use animation for animation, you must also use @ keyframes. Follow the preceding steps to encapsulate the relevant css code with @ mixin:

{}{}{}{}{}

It seems everything is done properly.

In combination with Compass, we are happy to invest in production:

{}{:;}{:;}

Writing Sass in this way is really simple and comfortable. I couldn't help opening the compiled css file. I almost cried out:

{:;:;:;:;:;}{:;:;:;:;:;:;  }{:;:;:;:;:;:;  }{:;:;:;:;:;:;  }{:;:;:;:;:;:;  }{:;:;:;:;:;:;  }{:;:;:;:;:;:;  }{:;:;:;:;:;:;  }{:;:;:;:;:;:;  }{:;:;:;:;:;:;  }{:;:;:;:;:;:;  }

As you can see, each @ keyframes repeatedly outputs a complete and compatible transform. Although such code won't have any exceptions, as a slightly clean programmer, it cannot be tolerated.

Then I thought about several solutions, which could not be well solved. It has been plagued by the following problems:

Google did not find the ready-made method for animation for sass.

Fortunately, an interesting problem was found on stackoverflow → _ → the portal.

The questioner and I have encountered a similar situation, which is also stuck in the private attribute output of @ keyframes. Fortunately, the Sass library of Bourbon was found in the answer below.

The @ keyframes method encapsulated by Bourbon can solve the problems I encountered.

I couldn't help but take a look at its source code, and the Implementation idea was very good. It also helps me better understand the Implementation ideas of experimental in Compass.

Considering that Compass and Bourbon are not mutually dependent, variable contamination may occur when used at the same time. Finally, based on the Implementation idea of Bourbon, We reconstructed an animation tool set called easy-animation.

{:;:;:;:;:;}{:;      }{:;      }{:;      }{:;      }{:;      }{:}{:;      }{:;      }{:;      }{:;      }{:;      }{:}{:;:;:;:;:;}{:;}{:;}{:;}{:;:;:;:;:;:;} {}{:;} {}{:;} {}{:;} {}{:;} {}

Simple and elegant use:

{}{:;}{:;}

Generated CSS:

{:;:;:;:;:;}{:;:;  }{:;:;  }{:;:;  }{:;:;  }{:;:;  }{:;:;  }{:;:;  }{:;:;  }{:;:;  }{:;:;  }

 

 

Above.

 

Link: http://www.cnblogs.com/maplejan/p/3659830.html

Author: Maple Jan

 

References:

Http://bourbon.io/

Http://sass-lang.com/

Http://compass-style.org/