Skip to content

Instantly share code, notes, and snippets.

@rsboarder
Created March 16, 2015 09:03
Show Gist options
  • Save rsboarder/530aca35eff11b11cd9b to your computer and use it in GitHub Desktop.
Save rsboarder/530aca35eff11b11cd9b to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
/*! ========================================================================
QUANTITY QUERIES FOR SASS
-------------------------
Author: Indrek Paas <@indrekpaas>
Inspired by Heydon Pickering's Quantity Queries for CSS
http://alistapart.com/article/quantity-queries-for-css
`number()` function by Hugo Giraudel
======================================================================== */
@mixin qty($expr) {
// Convert `$expr` to a string to allow parsing
// of `type-of($expr) == number`
$expr: $expr + unquote("");
// Iterate through `$expr` operators
@if str-slice($expr, 1, 1) == "<" {
@if str-slice($expr, 2, 2) == "=" {
// Fewer than or equal to N
$expr: number(str-slice($expr, 3));
&:nth-last-child(-n+#{$expr}):first-child,
&:nth-last-child(-n+#{$expr}):first-child ~ & {
@content;
}
} @else {
// Fewer than N
$expr: number(str-slice($expr, 2));
&:nth-last-child(-n+#{$expr - 1}):first-child,
&:nth-last-child(-n+#{$expr - 1}):first-child ~ & {
@content;
}
}
} @else if str-slice($expr, 1, 1) == ">" {
@if str-slice($expr, 2, 2) == "=" {
// More than or equal to N
$expr: number(str-slice($expr, 3));
&:nth-last-child(n+#{$expr}),
&:nth-last-child(n+#{$expr}) ~ & {
@content;
}
} @else {
// More than N
$expr: number(str-slice($expr, 2));
&:nth-last-child(n+#{$expr + 1}),
&:nth-last-child(n+#{$expr + 1}) ~ & {
@content;
}
}
} @else {
// Quantity N
$expr: number($expr);
&:nth-last-child(#{$expr}):first-child,
&:nth-last-child(#{$expr}):first-child ~ & {
@content;
}
}
}
@function number($string) {
$strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
$numbers: 0 1 2 3 4 5 6 7 8 9;
$result: 0;
@for $i from 1 through str-length($string) {
$character: str-slice($string, $i, $i);
$index: index($strings, $character);
@if not $index {
@warn "Unknown character `#{$character}`.";
@return false;
}
$number: nth($numbers, $index);
$result: $result * 10 + $number;
}
@return $result;
}
div {
@include qty(8) {
/* Quantity N */
}
@include qty("<8") {
/* Fewer than N */
}
@include qty("<=8") {
/* Fewer than or equal to N */
}
@include qty(">8") {
/* More than N */
}
@include qty(">=8") {
/* More than or equal to N */
}
}
/*! ========================================================================
QUANTITY QUERIES FOR SASS
-------------------------
Author: Indrek Paas <@indrekpaas>
Inspired by Heydon Pickering's Quantity Queries for CSS
http://alistapart.com/article/quantity-queries-for-css
`number()` function by Hugo Giraudel
======================================================================== */
div:nth-last-child(8):first-child, div:nth-last-child(8):first-child ~ div {
/* Quantity N */
}
div:nth-last-child(-n+7):first-child, div:nth-last-child(-n+7):first-child ~ div {
/* Fewer than N */
}
div:nth-last-child(-n+8):first-child, div:nth-last-child(-n+8):first-child ~ div {
/* Fewer than or equal to N */
}
div:nth-last-child(n+9), div:nth-last-child(n+9) ~ div {
/* More than N */
}
div:nth-last-child(n+8), div:nth-last-child(n+8) ~ div {
/* More than or equal to N */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment