Skip to content

Instantly share code, notes, and snippets.

@gearsdigital
Created August 4, 2015 07:19
Show Gist options
  • Save gearsdigital/3fcc6a65ea9623636428 to your computer and use it in GitHub Desktop.
Save gearsdigital/3fcc6a65ea9623636428 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
/*! ========================================================================
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
`str-num()` function by Hugo Giraudel
======================================================================== */
@mixin quantity-query($arg) {
// Exactly N
@if type-of($arg) == "number" {
&:nth-last-child(#{$arg}):first-child,
&:nth-last-child(#{$arg}):first-child ~ & {
@content;
}
}
// At least N and at most N
@else if type-of($arg) == "list" {
&:nth-last-child(n+#{nth($arg, 1)}):nth-last-child(-n+#{nth($arg, 2)}):first-child,
&:nth-last-child(n+#{nth($arg, 1)}):nth-last-child(-n+#{nth($arg, 2)}):first-child ~ & {
@content;
}
}
@else if type-of($arg) == "string" {
// Less than...
@if str-slice($arg, 1, 1) == "<" {
// Less than or equal to N
@if str-slice($arg, 2, 2) == "=" {
$arg: str-slice($arg, 3);
&:nth-last-child(-n+#{$arg}):first-child,
&:nth-last-child(-n+#{$arg}):first-child ~ & {
@content;
}
}
// Less than N
@else {
$arg: str-num(str-slice($arg, 2));
&:nth-last-child(-n+#{$arg - 1}):first-child,
&:nth-last-child(-n+#{$arg - 1}):first-child ~ & {
@content;
}
}
}
// More than...
@else if str-slice($arg, 1, 1) == ">" {
// More than or equal to N
@if str-slice($arg, 2, 2) == "=" {
$arg: str-slice($arg, 3);
&:nth-last-child(n+#{$arg}),
&:nth-last-child(n+#{$arg}) ~ & {
@content;
}
}
// More than N
@else {
$arg: str-num(str-slice($arg, 2));
&:nth-last-child(n+#{$arg + 1}),
&:nth-last-child(n+#{$arg + 1}) ~ & {
@content;
}
}
}
}
}
@function str-num($string) {
// Matrices
$strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
$numbers: 0 1 2 3 4 5 6 7 8 9;
// Result
$result: 0;
// Looping through all characters
@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 quantity-query(8) {
/* Exactly 8 */
}
@include quantity-query(8 12) {
/* At least 8 and at most 12 */
}
@include quantity-query("<8") {
/* Less than 8 */
}
@include quantity-query("<=8") {
/* Less than or equal to 8 */
}
@include quantity-query(">8") {
/* More than 8 */
}
@include quantity-query(">=8") {
/* More than or equal to 8 */
}
}
/*! ========================================================================
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
`str-num()` function by Hugo Giraudel
======================================================================== */
div:nth-last-child(8):first-child,
div:nth-last-child(8):first-child ~ div {
/* Exactly 8 */
}
div:nth-last-child(n+8):nth-last-child(-n+12):first-child,
div:nth-last-child(n+8):nth-last-child(-n+12):first-child ~ div {
/* At least 8 and at most 12 */
}
div:nth-last-child(-n+7):first-child,
div:nth-last-child(-n+7):first-child ~ div {
/* Less than 8 */
}
div:nth-last-child(-n+8):first-child,
div:nth-last-child(-n+8):first-child ~ div {
/* Less than or equal to 8 */
}
div:nth-last-child(n+9),
div:nth-last-child(n+9) ~ div {
/* More than 8 */
}
div:nth-last-child(n+8),
div:nth-last-child(n+8) ~ div {
/* More than or equal to 8 */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment