Switch to Sass

[daneden]

I’m working through adding some Sass functionality to Animate.css and using it as the primary language going forward.

We’ll use this PR to discuss development, potential features, and track progress.

Wishlist item(s) I’d like to explore before merging to master:

[ ] Config options for transformations¹

Footnotes

1. In other words, adding options for relative vs. absolute transformations (relative to the transformed element vs. fixed, absolute transformation values), and adding some sort of scale for absolute transformations (small, medium, large, extra large, etc.) ↩

[sp90]

I have made a sass library and a pull request for it https://github.com/sp90/animate.css, its using native scss

[benhodgson87]

If there's anything (code or features) of use in my Sass port of the library, feel free to use any of it. Happy to contribute; https://github.com/benhodgson87/animate.scss

[qivhou]

Do we need a less version for it ?
I'm working on http://github.com/qivhou/animate.less now.

[SerDIDG]

Less version can be useful. Now I had to set flag (less) to properly import css file of Animate.

[jdhobbsuk]

I like @benhodgson87's one, looks like my one if I'd bothered to keep it up-to-date! Thumbs up for:

• Bower
• BEM syntax
• Prefix switch (so you can use Autoprefixer).

Still think these mixins might come in handy though:

@include animation(fadeInDown);
@include duration(1s);
@include delay(2s);

[andresochoas]

I think it would be ideal to add autoprefixer to this version. Support from browsers changes very often, so it's best to let the autoprefixer take care of it. See more

[tomsommer]

SCSS would be great, but autoprefixer is usually handled globally, so no real reason to add this.

[arcanedev-maroc]

Yes, there is no need to add prefixes thanks to PostCSS and https://github.com/postcss/autoprefixer.

[daneden]

I impulsively made a call here and am now reconsidering. I'm still open to community suggestions about what we'd like to see in a major version of Animate.css.

Open source is hard! Thanks everyone (especially @eltonmesquita!) for your contributions and patience.

[eltonmesquita]

No need to thanks @daneden ;D. TBH, I think that the considerations you showed when you've sent this PR are still valid. As far as I can say SCSS is still the most used and known pre-processor out there. Although there are some Sass features that could make things easier, I do like the way you kept things simple and easy to understand even for beginners. I vote for this simplicity!

Something that's being etching my ears is how we'll deal with this outdated branch. It's not an easy merge, at all. I still don't have a good plan to merge these branches without a massive work and unfortunately ReaLife have not made easy to get proper time to think in details about this. Any suggestion?

In the next weeks I'll have lots of free time, so I'll be able to put things in action.

[daneden]

@eltonmesquita and I chatted a bit about this, and along with difficulties to merge this old branch, I think it's safe to say that we can abandon a move to SCSS. The main reasons to do so in the first place were:

• Custom namespaces. We've had a few folks needing a safe namespace for Animate.css classes, but we think this need is borne more out of needing any safe namespace than necessarily needing a custom namespace. This is something we can change in a 4.0 version without SCSS.
• Variables/customisations. With the addition of custom properties in CSS, we can now do this without the use of a CSS preprocessor (and even have dynamic variables that can be changed with JS!)

In addition to the above, I'm confident that using modern, plain CSS is a much more future-proof option than switching now to Sass and then eventually (likely) once more back to plain CSS.

For the time being, I will leave the Sass branch open, and will delete it as we move toward a final 4.0 release.

[sp90]

@daneden I guess the reason for having a Scss version was so that it could toggle the need of keyframes so you don't bloat your project with all the keyframes when they're not needed, but I understand your idea of having it in plain and respect your choice 👍

[daneden]

@sp90 I figured that with postcss people could still do this. I do this with my personal site, using @import "file.css" to compile to a single stylesheet.

[JayHoltslander]

Hello. I ended up here after searching for "Animate.css Sass"

I think it's safe to say that we can abandon a move to SCSS

☹️

[zedjr]

Is there a way to use version 4 in my sass files rather than put the code in my html. I know of extend but i know that can and will have adverse effects. Is there another way?

[eltonmesquita]

SASS supports CSS imports, so you can just import the files you need directly from the animate.css project.

[zedjr]

yes but how do you use animate css library without using @extend. Or must i use extend and if so will it be ok using extend with this library. I have seen other libraries that claim it is ok using extend with their css library.

[eltonmesquita]

There should be no problem using extends or just importing the files and using the file names directly in the HTML. You could also create a thin wrapper around it so you can even switch the provided CSS variables through SASS. There's no recommended way for using the library alongside SASS, do what works best for you.

If you need more help with this, please use stackoverflow or the likes as this is an issue tracker that is used to report bugs and improvements. You won't get much help about usage around here.