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

Compass

354
297
+ 1
12
Less

2.5K
1.2K
+ 1
930
Sass

42.4K
31.5K
+ 1
3K

Compass vs Less vs Sass: What are the differences?

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

Advice on Compass, Less, and Sass
awesomebanana2018
Needs advice
on
PostCSSPostCSSSassSass
and
StylusStylus

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 (2)
Recommends
on
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
Decisions about Compass, Less, and Sass
Noel Broda
Founder, CEO, CTO at NoFilter · | 2 upvotes · 15.2K views

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.

See more
Cory Bell

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.

See more
Manage your open source components, licenses, and vulnerabilities
Learn More
Pros of Compass
Pros of Less
Pros of Sass
  • 9
    No vendor prefix CSS pain
  • 1
    Mixins
  • 1
    Variables
  • 1
    Compass sprites
  • 215
    Better than css
  • 177
    Variables
  • 141
    Mixins
  • 99
    Maintainable
  • 79
    Used by bootstrap
  • 55
    Open source
  • 50
    Extendable
  • 43
    Functions
  • 39
    Dynamic
  • 30
    Fast
  • 2
    CSS is valid LESS, very easy to pick up
  • 613
    Variables
  • 594
    Mixins
  • 466
    Nested rules
  • 410
    Maintainable
  • 300
    Functions
  • 149
    Modular flexible code
  • 143
    Open source
  • 112
    Selector inheritance
  • 107
    Dynamic
  • 96
    Better than cs
  • 5
    Used by Bootstrap
  • 3
    If and for function
  • 2
    Better than less
  • 1
    Inheritance (@extend)
  • 1
    Custom functions

Sign up to add or upvote prosMake informed product decisions

Cons of Compass
Cons of Less
Cons of Sass
    Be the first to leave a con
      Be the first to leave a con
      • 6
        Needs to be compiled

      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 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.

      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 Less?
      What companies use Sass?

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

      What tools integrate with Compass?
      What tools integrate with Less?
      What tools integrate with Sass?

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

      What are some alternatives to Compass, Less, 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.
      Git
      Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
      GitHub
      GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Over three million people use GitHub to build amazing things together.
      See all alternatives