Need advice about which tool to choose?Ask the StackShare community!
Sass vs Stylus: What are the differences?
# Introduction
Sass and Stylus are popular preprocessor scripting languages that extend the capabilities of CSS. While they both serve the same purpose, there are key differences between the two that developers should be aware of.
1. **Syntax**: Sass follows a strict indentation-based syntax similar to Python, while Stylus uses a concise and minimalistic syntax with fewer symbols and punctuation.
2. **Language features**: Sass offers a wider range of language features such as loops, conditionals, and mixins, making it more versatile but also more complex for beginners. Stylus, on the other hand, emphasizes brevity and simplicity, which can lead to more concise code.
3. **Installation**: Sass requires Ruby to be installed on the system as it is written in Ruby, whereas Stylus is written in Node.js and can be installed using npm, making it easier to set up for Node.js developers.
4. **Community and Support**: Sass has a larger and more established community with extensive documentation and support, making it easier to find resources and solutions to common problems. Stylus, while recognized for its efficiency, has a smaller user base and may have limited resources available.
5. **Vendor Prefixing**: Sass does not have built-in support for vendor prefixing, requiring the use of additional tools or plugins, whereas Stylus includes automatic vendor prefixing functionality, simplifying the process of ensuring cross-browser compatibility.
6. **File Extensions**: Sass traditionally uses the .sass file extension for its syntax, while Stylus uses the .styl extension, allowing developers to easily distinguish between the two languages based on the file type.
In Summary, Sass and Stylus differ in syntax, language features, installation process, community support, vendor prefixing capabilities, and file extensions.
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 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
Pros of Stylus
- Simple69
- Indented syntax54
- Efficient38
- Built for node.js33
- Open source32
- Expressive24
- Maintainable21
- Feature-rich17
- Better than CS13
- Variables6
- Functions5
- @extend directive3
- Contempt for curly brackets2
- Very clean2
- Mixins2
- Is Easy2
- No colons, semi-colons or even curly braces2
- Its unique1
- Dynamic selectors1
- Scriptable1
- Easy Efficiently1
- Transparent1
- Supports orthogonal architecture1
Sign up to add or upvote prosMake informed product decisions
Cons of Sass
- Needs to be compiled6