Skip to content

Instantly share code, notes, and snippets.

@thybzi
Created February 23, 2016 01:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thybzi/2911d6ee6d4604066094 to your computer and use it in GitHub Desktop.
Save thybzi/2911d6ee6d4604066094 to your computer and use it in GitHub Desktop.
Stylus selector combinator mixin: http://codepen.io/thybzi/pen/GobVEX
//**
//* Put CSS combinator between current selector and subj -- in direct and reversed order
//* Apply CSS rules block to resulting selector
//* Example output: .parent .curr + .subj, .parent .subj + .curr { color: red; }
//* Limitation: current selector must have a separent level in selector tree (e.g. & > .curr)
//* @param {string} subj Another selector to combinate with
//* @param {string='+'} comb CSS combinator (can be: '+', '~', '>' or ' ')
//*/
combinate(subj, comb='+')
scurr = selectors()[-1]
pcomb = ' '
for c in ('>' '+' '~')
if match('^& & ' + c + ' ', scurr)
pcomb = c
if comb != ' '
comb = ' ' + comb + ' '
if pcomb != ' '
pcomb = ' ' + pcomb + ' '
sdir = comb + subj
srev = '../' + pcomb + subj + comb + '^[-1..-1]'
{join(', ', (sdir srev))}
{block}
// Let the fun begin
.wrapper
/*!* Test one (parent with rule '>', combinate with '+' by default) */
& > .item
+combinate('*')
margin-top: 15px
/*!* Test two (parent rule with ' ', combinate with '>') */
.test
+combinate('.fest', '>')
vertical-align: bottom
color: green
/*!* Test three (parent rule with'~', combinate with ' ') */
& ~ .foobar
+combinate('.qux', ' ')
padding-left: 45px
/*!* Test four (many pre-parents, direct parent rule with '~', combinate with '+' */
& > .bar ~ .baz .qux + .whistle
& ~ .andro
+combinate('figure', '+')
padding-left: 45px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment