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

PreCSS

1
4
+ 1
1
Sass

31.2K
22.9K
+ 1
3K
Add tool

Sass vs PreCSS: What are the differences?

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.

What is PreCSS? Use Sass-like markup in your CSS. It combines Sass-like syntactical sugar — like variables, conditionals, and iterators — with emerging CSS features — like logical and custom properties, media query ranges, and image sets.

Sass and PreCSS can be primarily classified as "CSS Pre-processors / Extensions" tools.

Sass and PreCSS are both open source tools. Sass with 12.6K GitHub stars and 1.93K forks on GitHub appears to be more popular than PreCSS with 1.54K GitHub stars and 83 GitHub forks.

Advice on PreCSS 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 PreCSS
Pros of Sass
  • 1
    Sass in PostCSS
  • 608
    Variables
  • 593
    Mixins
  • 467
    Nested rules
  • 411
    Maintainable
  • 299
    Functions
  • 150
    Modular flexible code
  • 141
    Open source
  • 112
    Selector inheritance
  • 107
    Dynamic
  • 96
    Better than cs
  • 4
    Used by Bootstrap
  • 2
    If and for function
  • 1
    Better than less
  • 1
    Inheritance (@extend)
  • 1
    Custom functions

Sign up to add or upvote prosMake informed product decisions

Cons of PreCSS
Cons of Sass
    Be the first to leave a con
    • 1
      Needs to be compiled

    Sign up to add or upvote consMake informed product decisions

    No Stats
    - No public GitHub repository available -

    What is PreCSS?

    It combines Sass-like syntactical sugar — like variables, conditionals, and iterators — with emerging CSS features — like logical and custom properties, media query ranges, and image sets.

    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 PreCSS?
    What companies use Sass?
      No companies found
      See which teams inside your own company are using PreCSS 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 PreCSS?
      What tools integrate with Sass?
        No integrations found

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

        What are some alternatives to PreCSS and Sass?
        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.
        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.
        PostCSS
        PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
        Stylus
        Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.
        Compass
        The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions.
        See all alternatives