Sass vs Less vs Stylus vs Rework

This is a talk I did at #FrontEndParty about the more advanced differences between Sass / Less / Stylus / and the new Rework CSS preprocessors. Since they are all so similar in functionality now, this focuses on helping you understand the advantages / disadvantages of each so you can choose the one that works best for your project

Transcript

1. Sass vs Less vs Stylus vs Rework
2. ◦ 32 years young ◦ Works at Olark ◦ Smells great today ◦ Quoted once in the comments of a Designer News post as “having a pretty cool idea.” ◦ Owns a fridge with water dispenser on the door, cubed / crushed buttons also Hi! I AM Joe Ellis (@notjoeellis)
3. 1. The Sameness..es?
4. Media queries Extends / placeholders @content / block mixins Importing Color Manipulation Sass / Less / Stylus Variables Mixins Loops & Conditionals Nesting Maths
5. 2. Sass
6. STABLE AS F*CK ◦ Sass is almost 8 years old now ◦ API is well tested and supported ◦ Lots of library support RE: Sass
7. LIBSASS = SPEED ◦ Not just for Ruby anymore ◦ Libsass is the new C/C++ version of Sass ◦ It’s extremely fast, if not the fastest RE: Sass
8. DAT LIB / PLUGIN SUPPORT ◦ Foundation ◦ Compass ◦ Bootstrap even RE: Sass
9. LIBSASS IS MISSING IMPORTANT SH*T ◦ Still not on a 1:1 feature parity basis with Ruby Sass ◦ Means you still probably gotta use Ruby / ruby gems RE: Sass
10. ADDING CUSTOM STUFF IS, LIKE, JUST OK ◦ You can do it by extending from Sass:: Scripts::Functions, other parts not very straightforward, or documented well RE: Sass
11. TOTES VERBOSE ◦ Sass isn’t super easy to extend, so people make really long complicated mixins ◦ Supports lots of logic operators, but really overused, hard to follow RE: Sass
12. COMPASS SUX Whatever, I just hate complicated, bloated, slow Compass. RE: Sass
13. 2. LESS
14. @extend SUPPORT RE: LESS
15. GUARDED MIXINS RE: LESS
16. PROPERTY MERGES RE: LESS
17. JS, YA HEARD? ◦ Awesome if you’re doing mainly a Node or JS-based project ◦ Don’t have to deal with rubygems ◦ Compile CSS files on the fly RE: LESS
18. DONT COMPILE ON THE FLY YA DUMMY ◦ Seriously, that’s really not a feature ◦ It’s really slow RE: LESS
19. EXTENDING LESS ALSO SUX ◦ Not much better than Sass here ◦ You can do it, just kind of a pain (I think you actually have to fork less to some degree) RE: LESS
20. STILL NOT AS GOOD AS SASS ◦ Still some compile bugs when using advanced functions ◦ No straightforward logic / looping operators RE: LESS
21. 3. Stylus
22. JUST LIKE SASS IN JS FORM ◦ Near 1:1 Feature parity with most of what Sass offers ◦ But faster ◦ Like LESS, don’t have to deal with gems RE: Stylus
23. COMES WITH NIB RE: Stylus ◦ Supported mixin / Extend library ◦ Very easy to install ◦ Handy mixins ◦ Handles most browser prefixing automagically
24. SUCH CLEAN RE: Stylus
25. AN API FINALLY RE: Stylus
26. JUST DOESN’T GIVE A F*CK RE: Stylus
27. 3rd PARTY SUPPORT IS MEH RE: Stylus ◦ I guess some stuff exists? ◦ Probably not super supported anyways
28. 3. WTF is Rework
29. THE WHAT RE: Rework • Takes a string of CSS, produces a CSS abstract syntax tree (AST) • Has API for manipulating AST • Plugins are functions that can access AST and Rework instance. Chained together with `use` function • Can chain together plugins and generate a string of new CSS when you’re done. • I.E. You build your own CSS pre-processor
30. HAVEN’T USED IT ¯\_(ツ)_/¯ RE: Rework ◦ In theory, you only use what you need ◦ API is very simple, not really locked in ◦ Can very easily do other CSS functions like linting ◦ Can use with existing preprocessors
31. SUPER FAST RE: Rework ◦ Since you only add what you need, very quick to compile ◦ Some benchmarks clock it as fast as libsass (still depends what plugins you’re using though)
32. SOUNDS LIKE A LOTTA WORK RE: Rework ◦ Lots of rework plugins exist, but you’re dependent on the ecosystem if you don’t wanna make your own
33. 5,382 11,867 5,348 LESS Sass Sass Stylus 2,012 Rework GITHUB STATS
34. STOP.