

LearnBoost's Stylus: Expressive, dynamic, robust CSS - catshirt
http://learnboost.github.com/stylus/

======
cloudhead
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.

~~~
tjholowaychuk
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

------
cmikec
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...](https://github.com/cmikec/coffeekup/commit/bd50744f9b3783244ae6b2d5a9694022400e37bc)

------
xtacy
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>?

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

[http://beautifulpixels.com/goodies/create-custom-webkit-
scro...](http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/)

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

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

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

~~~
tjholowaychuk
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.

~~~
aaronblohowiak
Where is the screencast?

~~~
tjholowaychuk
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

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

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

~~~
saurik
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.)

~~~
tjholowaychuk
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...

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

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

~~~
Semiapies
Thanks - I wasn't clear on that.

------
smoody
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!

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

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

~~~
tjholowaychuk
removing the scrollbars right away

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

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

------
tjholowaychuk
screencast: <http://screenr.com/bNY>

------
braindead_in
font-face is 404'ing

[https://github.com/learnboost/stylus/blob/master/docs/fontfa...](https://github.com/learnboost/stylus/blob/master/docs/fontface.md)

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

What's new in Stylus?

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

