LearnBoost's Stylus: Expressive, dynamic, robust CSS | Hacker News Reader

LearnBoost's Stylus: Expressive, dynamic, robust CSS

learnboost.github.com

50 pointscatshirt31 comments

Nice work. I'm stealing the js-style `arguments` variable idea, by the way. It makes complete sense to have.

I still can't agree with breaking CSS compatibility, though.

thanks man. yeah it is a love or hate thing, just like lots of people love jade or really hate jade haha so I suspect it will be the same thing. I think named args would be fantastic to have as well, more expressive for mixins that have many params

If you like this you might like http://coffeekup.org/ as well. With a few tiny modifications, here's coffeekup with Stylus integrated: https://github.com/cmikec/coffeekup/commit/bd50744f9b3783244...

It's an awesome introduction to "Why use Stylus to write CSS?"

EDIT: does anyone know how to create those nice, thin, grey scrollbars on the docs page: http://learnboost.github.com/stylus/docs/js.html?

You can do it with some custom webkit selectors, BUT I just removed them because apparently they cause some issues on iOS

> does anyone know how to create those nice, thin, grey scrollbars on the docs page

http://beautifulpixels.com/goodies/create-custom-webkit-scro...

@paulirish and @tjholowaychuk: Thanks a lot!

Looks fantastic. The removal of colons and parentheses makes this a net win over Sass, not even taking into account everything else. In a verbose and redundant-by-design language like CSS, anything which reduces the total number of keystrokes makes my fingers glad.

as of a few minutes ago the property colons are optional :) some people wanted them, but I agree

Interesting.. so this is like sass with functions, iteration and optional colons?

we have many many more features that I could not mention in the screencast. Nothing even remotely as robust was available for node apps, and the syntax is far less verbose, however of course some people will prefer the verbose css-like syntax of less/scss.

Where is the screencast?

http://bit.ly/h1pDXA

Added the link there. We wanted something similar to sass for flexibility, but there were some things obvious to me that were missing or that could be improved both as far as syntax goes and features

I'd be interested to know why you created a whole new language instead of improving on Sass. Just seemed like more fun?

various reasons, we have full control over the syntax and features. Plus this is written with JavaScript, for nodejs, not Ruby.

I'm actually serious in my curiosity: why do you care what language something is written in, as long as it work and is efficient enough for your use case? Why does it matter that these other programs were written in (I don't see why you said "for", so I'm going to use "in") Ruby?

(The wish to control the syntax is fair, I'm just curious why you threw in that other reason regarding languages.)

because it is beneficial to have these sorts of libraries written in the language you develop in... you dont need to install another language, you can interact with the native API instead of IPC etc...

Very interesting. I'd probably use colons anyway, but the only thing that would really bug me is the & syntax for nested selectors, as compared to just nesting the selectors in less.

those are parent references, ex: 'foo:hover' vs 'foo :hover', you can simply nest them for descendants

Thanks - I wasn't clear on that.

learnboost is leading the way when it comes to nimble startups that take the time and effort required to open source their code. great work!

Can't go wrong with being on the cutting-edge :)

I can not scroll the page on any iOS device. Is anyone else having problems? Is this a case of too clever web design?

removing the scrollbars right away

Example of the in-language functions: http://bit.ly/fQ2SCf

I don't get it. Is this compile by javascript or what? Where i can look to language compiler source code?

screencast: http://screenr.com/bNY

font-face is 404'ing

https://github.com/learnboost/stylus/blob/master/docs/fontfa...

Can we have a direct comparison vs less/sass please?

What's new in Stylus?

I will try and come up with a matrix of features soonish, here are a few syntax comparisons http://bit.ly/hSodhV

Reply on news.ycombinator.com