Need advice about which tool to choose?Ask the StackShare community!
Compass vs Less vs Sass: What are the differences?
Syntax: One key difference between Compass, Less, and Sass is the syntax they use. Compass uses Sassy CSS, an extension of CSS3 that adds nested rules, variables, imports, and mixins. Less and Sass, on the other hand, have similar syntax with the use of variables, nesting, and mixins, but they differ in some advanced features and compilation methods.
Preprocessor Language: Compass is based on Sass, which is written in Ruby, whereas Less is written in JavaScript. Sass has two syntax options, the older, more strict indented syntax (Sass) and the newer, more CSS-like syntax (SCSS). Less, however, has a similar syntax to SCSS, allowing for easier transition for CSS developers.
Feature Set: Compass provides a set of built-in mixins and functions that can be used to streamline web development tasks like creating gradients, vendor prefixes, and more, making it a powerful choice for front-end development. Less and Sass also offer mixins and functions, but these need to be defined or imported separately, providing flexibility but requiring more setup.
Frameworks: Compass is a framework on its own, providing additional tools and libraries for web development. Less and Sass, however, are primarily preprocessors that can be extended with frameworks like Bootstrap or Foundation, allowing users to choose the level of abstraction and customization they need.
Community and Support: Compass has a dedicated community of users and contributors, but its popularity has decreased in recent years, leading to less active development and support. Less and Sass, being more widely used in the industry, have larger and more active communities with frequent updates and support from developers around the world.
Browser Compatibility: Compass-generated CSS may sometimes have browser compatibility issues due to the use of cutting-edge features and mixins. Less and Sass, being more widely adopted and tested, tend to have better browser compatibility out of the box, making them suitable for a wider range of projects.
In Summary, the key differences between Compass, Less, and Sass lie in their syntax, preprocessor language, feature sets, frameworks, community and support, and browser compatibility.
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?
We know that Sass is not a replace for CSS, but in my mind there is no CSS with no Sass.
One of the first complement/plugins I add to the environment, are the Sass processing files/demons.
I couldn't imagine going back to pure CSS. Sass is even the way to go, regarding Styled Components, CSS Modules, and all the other options.
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.
Pros of Compass
- No vendor prefix CSS pain9
- Mixins1
- Variables1
- Compass sprites1
Pros of Less
- Better than css215
- Variables177
- Mixins141
- Maintainable99
- Used by bootstrap79
- Open source55
- Extendable50
- Functions43
- Dynamic39
- Fast30
- CSS is valid LESS, very easy to pick up2
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 Less
Cons of Sass
- Needs to be compiled6
Sign up to add or upvote consMake informed product decisions
What is Compass?
What is Less?
What is Sass?
Need advice about which tool to choose?Ask the StackShare community!
What companies use Compass?
Sign up to get full access to all the companiesMake informed product decisions
Sign up to get full access to all the tool integrationsMake informed product decisions
Blog Posts
+26
+27
+20
+35+29