Stylus is better than LESS and SASS
Update: This was written as I was a pretty ignorant programmer :)
It's simple. LESS and SASS are both great, but they both lack seamless mixins. LESS lacks rgba(#HEX, opacity). That said, LESS is the worst of them all.
In my opinion, Stylus is superior to both of them.
Seamless mixins?
Yes. Like this: (docs)
border-radius(radius) {
-webkit-border-radius: radius;
-moz-border-radius: radius;
border-radius: radius;
}
#id {
border-radius: 3px;
}The result is:
#id {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}I prefer the css-like syntax. It's backward compatible and easier to pass-on to a non-initiated.
But I love Compass!
Me too. I adore it. Stylus has Nib as a replacement.
It has most of the useful stuff from Compass.
Pro tip: use Stylus.
Written by Jerome Gravel-Niquet
Related protips
11 Responses
I couldn't have said it better myself.
Lack of support for nested media queries is still a bummer. And "is better" is hard to quantify—Stylus doesn't support things like conditionals and loops (if you ever need that sort of thing).
I also miss the mix(red, green, 50%) function of Sass.
Nonetheless, I personally do use Stylus quite often as I love the syntax as well!
I've thoroughly explored all of them and, yeah, Stylus owns the other 2 pretty hard.
It's clean syntax and the fact it can do everything else the other preprocessors can do (but cleaner and with a better "watch" function) is what sold me.
.styl
body
background #000cmd prompt
stylus -wI posted this same sentiment on r/web_design and the majority of people use SCSS but couldn't provide a reason why it was better than Stylus in any way. They just use it, because.... well... just "because". :\
@rstacruz Have you tried the CSS literal syntax? http://learnboost.github.com/stylus/docs/literal.html
TBH, media queries are a bit borked, but I've always found a way to make anything work.
You might also try "unquote" (http://learnboost.github.com/stylus/docs/bifs.html). It helped me when trying to use variable widths in media queries.
Thanks for the "nib" tip, that was really useful.
the "image:" in Nib is super smart!
Stylus supports every form of conditional and looping evaluation that Sass does, contrary to a post above. However in my view, Stylus has some weaknesses due to its ultra-stripped down syntax, which raises ambiguity issues in the parsing. I've seen bugs due to this such as problems with certain cases involving pseudo-selectors, and they are super hard to pin down.
On the other hand, Sass is the most robust and stable of the three, despite the syntax being less cool. And the killer, underappreciated feature as of Sass 3.2, is placeholder or "extend-only" classes, which are a game-change for CSS frameworks.
Some things that I like about Less: name-spacing, arbitrary selectors as mixins (great for re-usability), nested media-queries
@lunelson Stylus supports placeholders and @extend :P
@matthewwithanm I somehow agree with you, But there's a really simple fix for making your mixins stand out, By just putting a "-" before the mixin name this is more than enough to distinguish whether It's a user defined property or an actual css property, I also try to keep all the mixins after all the normal css properties.
ex: -border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n </code> -border-radius(5px) </code> ex: .classname font-size 15px font-weight 700 background-color red -border-radius(5px) -transition(0.2s) .</code> </pre> And as far as nib goes, I've been working with stylus for over 10 month now, On really complicated projects and i never found a use for nib so far, Although it's very good You can still use stylus without the usage of nib. I also worked with less and sass, And i have to say stylus syntax is really heart warming and easy to read through with the right indentation space. Youssef.
Since few days, Stylus has a new toolbox much more like Compass/Bourbon -> http://kouto-swiss.io/
