Igosuki / compass-mixins

A collection of compass' stylesheet for bower dependencies and libsass
Other
592 stars 197 forks source link

about animation, keyframe..etc #71

Open sky790312 opened 8 years ago

sky790312 commented 8 years ago

i had setting ok in my project and use some mixin by import "compass/css3" or "compass" but i can't use some things like @include animtaion, keyframe, flex..and some mixin.. is there anything else i forgot !??

ziontab commented 8 years ago

Hi! I think you need to add @import "animate"; to start using those mixins. By default they are not included by @import "compass";.

kevinleguillou commented 7 years ago

I have the same import rules as @sky790312 but I found out the path to animation/core.scss in css3/animation.scss is wrong. It should be :

@import "../../animation/core";

Since core.scss is in the animation folder.

Also the comment in core.scss says // Core imported by default. You can also import 'animate' for predefined animations. but this is incorrect, it isn't in compass/css3.scss (which is imported by default).

As a result @sky790312 you need to import compass/css3/animation.scss in the file you want to use CSS3 animations.


However I'm having a hard time using this repo, I think some use cases haven't been tested and SASS compilation fails all over the place. I'll test the original repo to see what's wrong.

xzyfer commented 7 years ago

This project is not actively supported. I suggested using bourbon instead.

On 11 Oct 2016 7:52 PM, "Kevin Le Guillou" notifications@github.com wrote:

I have the same import rules as @sky790312 https://github.com/sky790312 but I found out the path to animation/core.scss in css3/animation.scss is wrong. It should be :

@import "../../animation/core";

Since core.scss is in the animation folder.

Also the comment in core.scss says // Core imported by default. You can also import 'animate' for predefined animations. but this is incorrect, it isn't in compass/css3.scss (which is imported by default).

As a result @sky790312 https://github.com/sky790312 you need to import

compass/css3/animation.scss in the file you want to use CSS3 animations.

However I'm having a hard time using this repo, I think some use cases haven't been tested and SASS compilation fails all over the place. I'll test the original repo to see what's wrong.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Igosuki/compass-mixins/issues/71#issuecomment-252851285, or mute the thread https://github.com/notifications/unsubscribe-auth/AAjZWL3cjJYrqAkncTUqh_d9bO8eJIq_ks5qy05fgaJpZM4GXH-n .

kevinleguillou commented 7 years ago

Bourbon does look to be the perfect alternative, thanks for the tip @xzyfer 👍

Igosuki commented 7 years ago

This project's goal was mostly to give the ability to keep compass and stil have a manageable REPL workflow (that doesnt take 2.5s to compile bootstrap 3). If you're aiming at modern sass i indeed advise bourbon or any other new sass 4 target framework.

kevinleguillou commented 7 years ago

I ended up here trying to solve this (https://github.com/Igosuki/compass-mixins/issues/84) because I wanted to use the latest node-sass, but overall switching to Bourbon seems a good evolution.

xzyfer commented 7 years ago

Bourbon maintains, or at least used to, api compatibility with compass. It's the recommended compass polyfill by the Sass team. There are some things that cannot be polyfilled in node-sass, for everything I recommend bourbon.

On 11 Oct 2016 8:39 PM, "Kevin Le Guillou" notifications@github.com wrote:

I ended up here trying to solve this (#84 https://github.com/Igosuki/compass-mixins/issues/84) because I wanted to use the latest node-sass, but overall switching to Bourbon seems a good evolution.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Igosuki/compass-mixins/issues/71#issuecomment-252861546, or mute the thread https://github.com/notifications/unsubscribe-auth/AAjZWGnp3WpDpGmzJOmiwisp5tVgCApSks5qy1k3gaJpZM4GXH-n .