Skip to content

Instantly share code, notes, and snippets.

@dechowdev
Last active October 26, 2015 22:17
Show Gist options
  • Save dechowdev/9d0db1ca3dbefd3d4e1b to your computer and use it in GitHub Desktop.
Save dechowdev/9d0db1ca3dbefd3d4e1b to your computer and use it in GitHub Desktop.
Quantity Queries Mixin for SASS
//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