Skip to content

Instantly share code, notes, and snippets.

@webcultist
Forked from satya164/quantity-query.scss
Last active September 15, 2015 14:53
Show Gist options
  • Save webcultist/b06c6b016d14cfe333d5 to your computer and use it in GitHub Desktop.
Save webcultist/b06c6b016d14cfe333d5 to your computer and use it in GitHub Desktop.
Quantity Queries in Sass
@mixin quantity-query($selector, $type, $amount, $max: null) {
@if $type == at-least {
#{$selector}:nth-last-child(n+#{$amount}),
#{$selector}:nth-last-child(n+#{$amount}) ~ #{$selector} { @content; }
} @else if $type == at-most {
#{$selector}:nth-last-child(-n+#{$amount}):first-child,
#{$selector}:nth-last-child(-n+#{$amount}):first-child ~ #{$selector} { @content; }
} @else if $type == between {
@if type-of($max) != "number" {
@error "Max value must be a number for quantity-query.";
}
#{$selector}:nth-last-child(n+#{$amount}):nth-last-child(-n+#{$max}):first-child,
#{$selector}:nth-last-child(-n+#{$amount}):nth-last-child(-n+#{$max}):first-child ~ #{$selector} { @content; }
} @else {
@error "Invalid type `#{$type}` for quantity-query. Allowed types - at-least, at-most, between.";
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment