Need advice about which tool to choose?Ask the StackShare community!

Animate.css

9.3K
1.6K
+ 1
0
Sass

31.3K
23.1K
+ 1
3K
Add tool

Animate.css vs Sass: What are the differences?

What is Animate.css ? A library of CSS animations. It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

What is Sass? Syntactically Awesome Style Sheets. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Animate.css and Sass can be categorized as "CSS Pre-processors / Extensions" tools.

Animate.css and Sass are both open source tools. Animate.css with 61.2K GitHub stars and 13K forks on GitHub appears to be more popular than Sass with 12K GitHub stars and 1.93K GitHub forks.

Advice on Animate.css and Sass
awesomebanana2018
Needs advice
on
StylusStylusSassSass
and
PostCSSPostCSS

Originally, I was going to start using Sass with Parcel, but then I learned about Stylus, which looked interesting because it can get the property values of something directly instead of through variables, and PostCSS, which looked interesting because you can customize your Pre/Post-processing. Which tool would you recommend?

See more
Replies (1)
Recommends
PostCSSPostCSS

You're not correct with saying "vs Postcss". You're using Less/Sass/Stylus/... to produce "CSS" (maybe extended means it has some future features) and then in any case PostCSS will play (it is shipped with Parcel/NextJS/CRA/...)

See more
Get Advice from developers at your company using Private StackShare. Sign up for Private StackShare.
Learn More
Pros of Animate.css
Pros of Sass
    Be the first to leave a pro
    • 608
      Variables
    • 593
      Mixins
    • 467
      Nested rules
    • 410
      Maintainable
    • 299
      Functions
    • 150
      Modular flexible code
    • 142
      Open source
    • 112
      Selector inheritance
    • 107
      Dynamic
    • 96
      Better than cs
    • 5
      Used by Bootstrap
    • 3
      If and for function
    • 1
      Inheritance (@extend)
    • 1
      Custom functions
    • 1
      Better than less

    Sign up to add or upvote prosMake informed product decisions

    Cons of Animate.css
    Cons of Sass
      Be the first to leave a con
      • 2
        Needs to be compiled

      Sign up to add or upvote consMake informed product decisions

      - No public GitHub repository available -

      What is Animate.css ?

      It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

      What is Sass?

      Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

      Need advice about which tool to choose?Ask the StackShare community!

      What companies use Animate.css ?
      What companies use Sass?
      See which teams inside your own company are using Animate.css or Sass.
      Sign up for Private StackShareLearn More

      Sign up to get full access to all the companiesMake informed product decisions

      What tools integrate with Animate.css ?
      What tools integrate with Sass?

      Sign up to get full access to all the tool integrationsMake informed product decisions

      What are some alternatives to Animate.css and Sass?
      JavaScript
      JavaScript is most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic,and supports object-oriented, imperative, and functional programming styles.
      Bootstrap
      Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
      Material Design for Angular
      Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.
      Less
      Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
      Material-UI
      MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
      See all alternatives