Bourbon vs Stylus: What are the differences?
What is Bourbon? A lightweight mixin library for Sass. 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.
What is Stylus? Expressive, robust, feature-rich CSS language built for nodejs. 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.
Bourbon and Stylus can be primarily classified as "CSS Pre-processors / Extensions" tools.
"Simple mixins" is the top reason why over 13 developers like Bourbon, while over 65 developers mention "Simple" as the leading cause for choosing Stylus.
Bourbon is an open source tool with 8.86K GitHub stars and 916 GitHub forks. Here's a link to Bourbon's open source repository on GitHub.
Coursera, Clay.io, and Cofounders Pte Ltd are some of the popular companies that use Stylus, whereas Bourbon is used by DeveloperTown, Helpful, and devbase.io. Stylus has a broader approval, being mentioned in 69 company stacks & 45 developers stacks; compared to Bourbon, which is listed in 25 company stacks and 12 developer stacks.
What is Bourbon?
What is Stylus?
Want advice about which of these to choose?Ask the StackShare community!
Sign up to add, upvote and see more prosMake informed product decisions
What are the cons of using Bourbon?
What are the cons of using Stylus?
Sign up to get full access to all the companiesMake informed product decisions
One of the main reasons I use it is that it combines most of what I like but is spread across other preprocessors.
The option to make functions that take places of properties is amazing.
border-radius: "child" $parent-radius can actually be calling a function like
border-radius("child", $parent-radius) where using
border-radius: 4px would just implement the standard expected result.
Add in my favorite selector: `^[-1..-1] to get the last raw selector in a nested situation. (its like magic in combination with BEM naming syntax)
Using Bourbon Neat for building a grid. It's easy to implement and is added to the CSS rather than the html which keeps similar modules looking the same.
[Free] We use this free Sass framework on just about any project that we work on.