Need advice about which tool to choose?Ask the StackShare community!
Less vs Sass: What are the differences?
Introduction: This Markdown code presents the key differences between Less and Sass, two popular CSS preprocessor languages.
- Syntax: Less uses a CSS-like syntax with some additional features, while Sass has a more concise and flexible syntax with powerful features like mixins and variables.
- Compilation: Less is compiled using JavaScript in the browser or server-side, whereas Sass has a Ruby-based command-line tool that compiles the code.
- Inheritance: Less does not support native inheritance, while Sass allows for robust inheritance capabilities through the use of @extend.
- Functions: Sass offers a robust set of functions for manipulating colors, strings, lists, and other data types, while Less has a limited set of built-in functions.
- Community Support: Sass has a larger and more active community contributing to its development, documentation, and tooling, making it more widely adopted in the industry compared to Less.
- Variables: In Less, variables are defined using the @ symbol, while in Sass, variables are defined using the $ symbol.
In Summary, the key differences between Less and Sass lie in their syntax, compilation methods, inheritance capabilities, functions, community support, and variable declaration syntax.
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 extensively use Sass and CSS Modules as our styling solution at Vinted. Even though we considered adopting a CSS-in-JS library, we ultimately leaned towards the flexibility that Sass and CSS Modules offer.
Vinted also has an internal design system where Storybook is used for development and documentation.
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 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 Less
Cons of Sass
- Needs to be compiled6
Sign up to add or upvote consMake informed product decisions
What is Less?
What is Sass?
Need advice about which tool to choose?Ask the StackShare community!
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