mirisuzanne / compass-animate

Compass port of Dan Eden's Animate.css
Other
270 stars 22 forks source link

Slow Sass compilation, any advice? #13

Open yanfali opened 10 years ago

yanfali commented 10 years ago

If I run a custom animation scss file through grunt-contrib-compass it's taking a really long time to create the animation part. I separated it out into it's own file to measure just how long:

Running "compass:server" (compass) task
directory .tmp/styles/
directory .tmp/styles/partials/
   create .tmp/styles/main.css (8.902s)
   create .tmp/styles/partials/animations.css (13.675s)
   create .tmp/styles/partials/pc_animations.css (0.277s)
Compilation took 22.856s

Even running it from the CLI using sass show's it's quite slow:

time sass partials/animations.scss -I ../bower_components --compass -I /usr/local/lib/ruby/gems/2.0.0/gems/animate-0.2.beta.0/stylesheets
sass partials/animations.scss -I ../bower_components --compass -I   9.87s user 0.20s system 99% cpu 10.129 total

The animations are fairly pedestrian

@import 'animate';
@include animate-fadeIn($class: true);
@include animate-fadeInDown($class: true);
@include animate-fadeInLeft($class: true);
@include animate-fadeInRight($class: true);
@include animate-fadeOut($class: true);
@include animate-fadeOutLeft($class: true);
@include animate-fadeOutRight($class: true);
@include animate-fadeOutUp($class: true);

The pc_animations.css is the precompiled version I created just to make a comparison.

Do you have any advice on how to speed up compass/sass with animate? I switched to animate 0.2 because it removed uses of @extend which saved another 10 seconds over what I was seeing before.

I'm hoping it's just some poor practices on my part that is making sass so slow.

OSX 10.8.5.
Sass 3.3.0.rc.1 (Maptastic Maple)
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin12.5.0]

*** LOCAL GEMS ***

animate (0.2.beta.0)
bigdecimal (1.2.0)
chunky_png (1.2.9)
compass (0.13.alpha.10, 0.12.2)
ffi (1.9.3)
fssm (0.2.10)
io-console (0.4.2)
json (1.7.7)
listen (1.1.6)
minitest (4.3.2)
psych (2.0.0)
rake (0.9.6)
rb-fsevent (0.9.3)
rb-inotify (0.9.2)
rb-kqueue (0.2.0)
rdoc (4.0.0)
sass (3.3.0.rc.1, 3.2.12)
test-unit (2.0.0.0)
alotropico commented 10 years ago

looking at the description, it seems you should not use:

@include animate;

Instead, use:

@include animate-flash; @include animate-fadeIn;

And so on, for detailed imports, and left all the rest not included.