LearnBoost/stylus — Issue #476: Feature: Improve scope, support rule-sets
Author: jasonkuhrt
Created: 2011-12-01 14:50:49+00:00
State: open

CSS implements rule sets such as:

box-orient
box-pack
box-...
...etc

This can be a nice way to create complex layouts without overly cumbersome syntax that's hard to understand. It also reads very well and self documents very well.

It would be nice if stylus let us do something equivalent (or better). The following is an actual code example.

### CURRENT

A1 the actual application:

.some-class
queue(gutter:2px,selector:".b",flush:true false,alignment=right bottom)

A2 the definitions:

queue-align(alignment=false false,queue_selector="")
if alignment[0]
text-align alignment[0]
if alignment[1]
{queue_selector}
vertical-align alignment[1]

// WARNING: queue must be invoked with () because only in that context are spaced NOT counted as arg separation
queue(gutter=o 1 o o,alignment=false false,offset=1,box_part="margin",selector=false,flush=true)

hflush = flush[0]
vflush = flush[1] isnt null ? flush[1] : flush[0]

hpush_prop = box_part +"-right"
vpush_prop = box_part +"-bottom"

item_selector = selector ? selector : "*"

if offset is 1
queue_selector = "& > "+ item_selector
else
queue_selector = "& > "+item_selector+":nth-child(n+"+offset+")" //"

{queue_selector}
css-shorthand(box_part,gutter)
display inline-block

queue-align(alignment,queue_selector)
// non-DRY is because of a bug: https://github.com/LearnBoost/stylus/issues/462
if hflush and vflush
& > {item_selector}:first-child
{box_part +"-left"} 0
{box_part +"-top"} 0
& > {item_selector}:last-child
{hpush_prop} 0
{vpush_prop} 0
else if hflush
& > {item_selector}:first-child
{box_part +"-left"} 0
& > {item_selector}:last-child
{hpush_prop} 0
else if vflush
& > {item_selector}:first-child
{box_part +"-top"} 0
& > {item_selector}:last-child
{vpush_prop} 0

### IDEALLY

B1 the ideal application (not currently supported by stylus):

.some-class
queue(gutter:2px,selector:".b",flush:true false)
queue-align bottom right

B2 the ideal definitions (not currently supported by stylus):

queue-align(alignment=false false)
if alignment[0]
text-align alignment[0]
if alignment[1]
{queue_selector}
vertical-align alignment[1]

queue(gutter=o 1 o o,offset=1,box_part="margin",selector=false,flush=true)

hflush = flush[0]
vflush = flush[1] isnt null ? flush[1] : flush[0]

hpush_prop = box_part +"-right"
vpush_prop = box_part +"-bottom"

item_selector = selector ? selector : "*"

if offset is 1
queue_selector = "& > "+ item_selector
else
queue_selector = "& > "+item_selector+":nth-child(n+"+offset+")" //"

{queue_selector}
css-shorthand(box_part,gutter)
display inline-block

& > {item_selector}:first-child
{box_part +"-left"} 0 if hflush
{box_part +"-top"} 0 if vflush
& > {item_selector}:last-child
{hpush_prop} 0 if hflush
{vpush_prop} 0 if vflush

# Summary

There is a lot going on above but the main thing to notice, that this issue is about is the following:

*Ideally `queue_selector` should be available to the SCOPE of the containing selector, so that other functions can access that variable*, thus enabling the creation of rule-sets.

Perhaps you disagree with *how* I am suggesting we support this (rule-sets) but I really hope you at any rate see the value in the concept proposed here. This is a very common use-case I encounter in my day-to-day framework building aspirations.