Compass vs Less vs Sass

Overview

Less

Stacks2.9K

Followers1.2K

Votes929

GitHub Stars17.0K

Forks3.4K

Sass

Stacks44.8K

Followers32.2K

Votes3.0K

GitHub Stars15.3K

Forks2.2K

Compass

Stacks352

Followers297

Votes12

GitHub Stars6.7K

Forks1.2K

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.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Less, Sass, Compass

Anonymous

CEO at ME!

Jun 17, 2020

Needs adviceon

Sass

Stylus

PostCSS

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

547k views547k

Comments

Cory

Mar 28, 2021

Decided

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.

40.3k views40.3k

Comments

Noel

Founder, CEO, CTO at NoFilter

Jun 8, 2021

Decided

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.

16k views16k

Comments

Detailed Comparison

Less	Sass	Compass
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.	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.	The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions.
Statistics
GitHub Stars 17.0K	GitHub Stars 15.3K	GitHub Stars 6.7K
GitHub Forks 3.4K	GitHub Forks 2.2K	GitHub Forks 1.2K
Stacks 2.9K	Stacks 44.8K	Stacks 352
Followers 1.2K	Followers 32.2K	Followers 297
Votes 929	Votes 3.0K	Votes 12
Pros & Cons
Pros 214 Better than css 177 Variables 141 Mixins 99 Maintainable 79 Used by bootstrap	Pros 613 Variables 594 Mixins 466 Nested rules 410 Maintainable 300 Functions Cons 6 Needs to be compiled	Pros 9 No vendor prefix CSS pain 1 Variables 1 Compass sprites 1 Mixins

What are some alternatives to Less, Sass, Compass?

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.

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.

Bourbon

Bourbon is a library of pure sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.

CSS Modules

It is a CSS file in which all class names and animation names are scoped locally by default. The key words here are scoped locally. With this, your CSS class names become similar to local variables in JavaScript. It goes into the compiler, and CSS comes out the other side.

astroturf

It lets you write CSS in your JavaScript files without adding any runtime layer, and with your existing CSS processing pipeline.

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.

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.

Autoprefixer

It is a CSS post processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code.

css-loader

The css-loader interprets @import and url() like import/require() and will resolve them.

Normalize.css

It makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Related Comparisons

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.

Compass vs Less vs Sass

Overview