p7suww
Last Updated: March 24, 2017
·
13.15K
· jeromegn
C96dbcc746d551ea0665da4a23536280

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.

Say Thanks
Respond

13 Responses
Add your response

3059

I couldn't have said it better myself.

over 1 year ago ·
3061
F8ec7f90daf8b1defb8e318d663c0f17

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!

over 1 year ago ·
3063
Cory simmons 700

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 #000

cmd prompt

stylus -w

I 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". :\

over 1 year ago ·
3064
Cory simmons 700

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

over 1 year ago ·
3074
Bf64dc75073534abf13084dbf68fde67

Thanks for the "nib" tip, that was really useful.

over 1 year ago ·
3145
406952 10151308091355050 1199291037 n

the "image:" in Nib is super smart!

over 1 year ago ·
4713
38c038c7602b0ded9d8818d39a22f81b

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.

over 1 year ago ·
6448
0e631d686b8356102da3721bd8cd65c4

IMHO This is a huge misfeature and the biggest reason to prefer either LESS or SASS. There's no way to tell if the property is an actual CSS property or a user-defined one. Also, NIB overrides regular properties. (I'm not sure if there's a way to opt out.) Worse, this doesn't seem to be scoped so simply by importing a file into one that defines (or imports) mixins, you could be drastically changing its CSS output!

over 1 year ago ·
9492
4dfb7c64c74417c5c1339af8b3e37f1c

Some things that I like about Less: name-spacing, arbitrary selectors as mixins (great for re-usability), nested media-queries

over 1 year ago ·
10035
Cory simmons 700

@lunelson Stylus supports placeholders and @extend :P

over 1 year ago ·
14160

@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.
over 1 year ago ·
14161
0e631d686b8356102da3721bd8cd65c4

@youssefsh_ Yeah, the problem can be alleviated somewhat by convention, but then you need to get everybody to agree to that. Ultimately, mixins and rule declarations are two completely different things and should therefore (IMO) have different representations in the language.

over 1 year ago ·
15539
63f00632ffeb69b559fa28ae63e40301

Since few days, Stylus has a new toolbox much more like Compass/Bourbon -> http://kouto-swiss.io/

over 1 year ago ·