Last active
October 26, 2015 22:17
-
-
Save dechowdev/9d0db1ca3dbefd3d4e1b to your computer and use it in GitHub Desktop.
Quantity Queries Mixin for SASS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//While not complete this takes care of most quantity queries scenarios I have run into | |
/** | |
* Quantity Queries | |
* @param {[int]} $amount [Amount of elements needed for this to fire] | |
* @param {[type]} $q:'most' [Can have "most", "least" and "most-least"] | |
* @return {[@content]} [Returns the wrapped expression in a content query] | |
* Usage: Embed into an element of choice wrapping the properties - compile | |
*/ | |
@mixin qq($amount, $max: 10, $q:'most', $elem: null){ | |
// $elem: & !default; | |
//Setting the element to the parent... HOWEVER in some cases it will be nice to select it outside of parent, | |
//since the element could be nested and then the quantity query would fail... | |
@if $elem != null { | |
$elem: $elem; | |
} @else { | |
$elem: &; | |
} | |
@if($q == 'most'){ | |
&:nth-last-child(-n+#{$amount}):first-child, | |
&:nth-last-child(-n+#{$amount}):first-child ~ #{$elem} | |
{ | |
@content; | |
} | |
} @else if ($q == 'least'){ | |
&:nth-last-child(n+#{$amount}), | |
&:nth-last-child(n+#{$amount}) ~ #{$elem} { | |
//#{$el} | |
@content; | |
} | |
} @else if ($q == 'most-least'){ | |
&:nth-last-child(n+#{$amount}):nth-last-child(-n+#{$max}):first-child, | |
&:nth-last-child(n+#{$amount}):nth-last-child(-n+#{$max}):first-child ~ #{$elem} | |
{ | |
@content; | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment