Need advice about which tool to choose?Ask the StackShare community!
Advice on Compass, PostCSS, and Sass
awesomebanana2018
CEO at ME! · | 5 upvotes · 535.2K views
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?
Decisions about Compass, PostCSS, and Sass
Cory Bell
at Bell Code · | 4 upvotes · 39K views
JSS is makes a lot of sense when styling React components and styled-components is a really nice implementation of JSS. I still get to write pure CSS, but in a more componentized way. With CSS post-processors like SASS and LESS, you spend a lot of time deciding where your .scss or .less files belong, which classes should be shared, and generally fighting the component nature of React. With styled-components, you get the best of CSS and React. In this project, I have ZERO CSS files or global CSS classes and I leverage mixins quite a bit.
Manage your open source components, licenses, and vulnerabilities
Learn MorePros of Compass
Pros of PostCSS
Pros of Sass
Pros of Compass
- No vendor prefix CSS pain9
- Mixins1
- Variables1
- Compass sprites1
Pros of PostCSS
- The "babel" of CSS21
- Customizable15
- Autoprefixer8
- Variables2
- Mixins1
- CSS MQPacker1
- PostCSS Flexbugs Fixes1
Pros of Sass
- Variables613
- Mixins594
- Nested rules466
- Maintainable410
- Functions300
- Modular flexible code149
- Open source143
- Selector inheritance112
- Dynamic107
- Better than cs96
- Used by Bootstrap5
- If and for function3
- Better than less2
- Inheritance (@extend)1
- Custom functions1
Sign up to add or upvote prosMake informed product decisions
Cons of Compass
Cons of PostCSS
Cons of Sass
Cons of Compass
Be the first to leave a con
Cons of PostCSS
Be the first to leave a con
Cons of Sass
- Needs to be compiled6
Sign up to add or upvote consMake informed product decisions
What is Compass?
The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions.
What is 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.
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 Compass?
What companies use PostCSS?
What companies use Sass?
What companies use Compass?
What companies use PostCSS?
Sign up to get full access to all the companiesMake informed product decisions
What tools integrate with Compass?
What tools integrate with PostCSS?
What tools integrate with Sass?
What tools integrate with PostCSS?
Sign up to get full access to all the tool integrationsMake informed product decisions
Blog Posts
+46 27
32726
+27 13
5692
+20 2
1005
+35 13
1790
+29 6
3128
What are some alternatives to Compass, PostCSS, and Sass?
Cherokee
Cherokee is highly efficient, extremely lightweight and provides rock solid stability. Among its many features there is one that deserves special credit: a user friendly interface called cherokee-admin that is provided for a no-hassle configuration of every single feature of the server.
Protractor
Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.
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.
Python
Python is a general purpose programming language created by Guido Van Rossum. Python is most praised for its elegant syntax and readable code, if you are just beginning your programming career python suits you best.
Node.js
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.