LearnBoost/stylus — Issue #560: Capture function params from list arguments
Author: jasonkuhrt
Created: 2012-02-09 13:34:47+00:00
State: open

#### CSS has a variety of arguments that work sort of like lists. Clockhand syntax is one: `margin 0 4px 2px 1px`.

In stylus I find it prudent the majority of the time to use list-style params in place of a comma dividing every single param.

For instance compare the two signatures of a functions that will do the same thing (turn children into `inline-block`s):

queue( gutter_top, gutter_right, gutter_bottom, gutter_left, h_align, v_align )
// function body ...

queue( 10px, 5px, 6px, 3px, right, middle )
queue 10px 5px 6px 3px right middle

or

queue( gutter, align )
// function body ...

queue( 10px o 6px o, false middle )
queue (10px 5px 6px 3px) (right middle) // ugly, confusing-ish, basically a FAIL syntax-wise?

Currently I have to do boilerplate work to find out questions like:
* Was `align` passed 1 or 2 params?
* If `align` only receives 1 argument, should the second `align` value receive a default? No matter what it has to be handled somehow
* etc...

This does not scale well. It's really boring. It detracts from a powerful pattern that is common in css.

#### I think I have a good feature proposal for this pain-point. Imagine a syntax like the following:

queue( gutter{ top right=top bottom=top left=top}, align{h=false v=h} )
// now I can access:
// gutter:top
// gutter:right
// gutter:bottom
// gutter:left
// align:h
// align:v
// function body ...

In large the two advantages this offers:

- much easier time passing lists to functions (this has a host of sub-benefits IMO)
- much easier time using parenless syntax

i.e.:

queue( 10px o 6px o, false middle ) // Nothing changes here....
queue 10px 5px 6px 3px, right middle // Breath of fresh air!

I think this feature could be dramatically helpful for stylus devs. I am not sure if this "drama" is as obvious to others as it feels to me. If not, I will try to provide more examples and use-cases.

Thoughts?