7 ms·
LearnBoost's Stylus: Expressive, dynamic, robust CSS
- aaronblohowiak 16y agoInteresting.. so this is like sass with functions, iteration and optional colons?
- tjholowaychuk 16y agowe 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.
- aaronblohowiak 16y agoWhere is the screencast?
- threepointone 16y agohttp://bit.ly/h1pDXA http://bit.ly/h1pDXA
- tjholowaychuk 16y agoAdded 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
- chc 16y agoI'd be interested to know why you created a whole new language instead of improving on Sass. Just seemed like more fun?
- tjholowaychuk 16y agovarious reasons, we have full control over the syntax and features. Plus this is written with JavaScript, for nodejs, not Ruby.
- saurik 16y agoI'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.)
- tjholowaychuk 16y agobecause 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...
- Charuru 16y agoCan we have a direct comparison vs less/sass please? What's new in Stylus?
- tjholowaychuk 16y agoI will try and come up with a matrix of features soonish, here are a few syntax comparisons http://bit.ly/hSodhV http://bit.ly/hSodhV
- tjholowaychuk 16y agoscreencast: http://screenr.com/bNY http://screenr.com/bNY
- cloudhead 16y agoNice 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.
- tjholowaychuk 16y agothanks 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
- braindead_in 16y agofont-face is 404'ing https://github.com/learnboost/stylus/blob/master/docs/fontface.md https://github.com/learnboost/stylus/blob/master/docs/fontfa...
- moeffju 16y agoI can not scroll the page on any iOS device. Is anyone else having problems? Is this a case of too clever web design?
- tjholowaychuk 16y agoremoving the scrollbars right away
- peng 16y agoLooks 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.
- tjholowaychuk 16y agoas of a few minutes ago the property colons are optional :) some people wanted them, but I agree
- smoody 16y agolearnboost is leading the way when it comes to nimble startups that take the time and effort required to open source their code. great work!
- tjholowaychuk 16y agoCan't go wrong with being on the cutting-edge :)
- xtacy 16y agoIt'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 http://learnboost.github.com/stylus/docs/js.html?
- tjholowaychuk 16y agoYou can do it with some custom webkit selectors, BUT I just removed them because apparently they cause some issues on iOS
- paulirish 16y ago> does anyone know how to create those nice, thin, grey scrollbars on the docs page http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/ http://beautifulpixels.com/goodies/create-custom-webkit-scro...
- xtacy 16y ago@paulirish and @tjholowaychuk: Thanks a lot!
- tjholowaychuk 16y agoExample of the in-language functions: http://bit.ly/fQ2SCf http://bit.ly/fQ2SCf
- Semiapies 16y agoVery 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.
- tjholowaychuk 16y agothose are parent references, ex: 'foo:hover' vs 'foo :hover', you can simply nest them for descendants
- Semiapies 16y agoThanks - I wasn't clear on that.
- vitex 16y agoI don't get it. Is this compile by javascript or what? Where i can look to language compiler source code?
- cmikec 16y agoIf you like this you might like http://coffeekup.org/ http://coffeekup.org/ as well. With a few tiny modifications, here's coffeekup with Stylus integrated: https://github.com/cmikec/coffeekup/commit/bd50744f9b3783244ae6b2d5a9694022400e37bc https://github.com/cmikec/coffeekup/commit/bd50744f9b3783244...