static-dev / axis

terse, modular & powerful css library
http://axis.netlify.com
Other
320 stars 45 forks source link

Mixin Quantity Queries #189

Closed dbox closed 9 years ago

dbox commented 9 years ago
// Mixin Quantity Queries

quantity-at-least(count=4, selector=li)
  & > {selector}:nth-last-child(n+{count})
  & > {selector}:nth-last-child(n+{count}) ~ {selector}
    {block}

quantity-at-most(count=4, selector=li)
  & > {selector}:nth-last-child(-n+{count}):first-child
  & > {selector}:nth-last-child(-n+{count}):first-child ~ {selector}
    {block}

quantity-between(start=0, end=10, selector=li)
  & > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child
  & > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child ~ {selector}
    {block}

quantity-exactly(count=4, selector=li)
  & > {selector}:nth-last-child({count}):first-child
  & > {selector}:nth-last-child({count}):first-child ~ {selector}
    {block}

// usage
ul.least
  +quantity-at-least(2)
    border: 1px solid blue 

demo here:

http://codepen.io/dbox/pen/waeQOL

I'll get these PR'd in soon. Thanks to @declandewet and @abstracthat

jescalan commented 9 years ago

Awesome, really nice work here!

dbox commented 9 years ago

@declandewet check codepen. okay with name selectors... instead of nodes...?

dbox commented 9 years ago

actually I think i'm going to redo it to be selector=li so it defaults to li

abstracthat commented 9 years ago

This is awesome. Great job!

Personally I still feel select- is a more natural namespace. We are building selectors. And the individual mixin names (at-least,exactly...) imply that we are working with quantities. I think it reads better that way. But I'm fine with just adding some aliases in my settings file if no one agrees with me. :)

dbox commented 9 years ago

I think select will get confusing, especially with between because I'd assume if i did select-between(1, 4) (From a set of 10) it'd only target those specific ones. I'm open ..