Quantity Queries for CSS (Generated by SassMeister.com)

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/*
Source: http://alistapart.com/article/quantity-queries-for-css 
Source: http://sassmeister.com/gist/f48e5e34d329eaf44e37 
Topic: Quantity Queries for CSS
*/

// ----
// 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 */
  }
}

SassMeister-output.css

/*
Source: http://alistapart.com/article/quantity-queries-for-css 
Source: http://sassmeister.com/gist/f48e5e34d329eaf44e37 
Topic: Quantity Queries for CSS
*/
/*! ========================================================================

    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 */
}