Quantity queries for Sass

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

// =========================================================================
//
//  QUANTITY QUERIES FOR SASS
//  -------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Heydon Pickering's Quantity Queries for CSS
//  http://alistapart.com/article/quantity-queries-for-css
//
//  26.04.2016 Add parent-child query example
//  21.01.2016 Update `_to-number` helper function
//  09.11.2015 Add 'odd/even' argument support
//  03.10.2015 Remove redundant 'query' from mixin name
//  04.08.2015 Add 'at-least/at-most' support
//  13.03.2015 Initial release
//
// =========================================================================

@mixin quantity($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" {
    // Odd/even
    @if $arg == "odd" or $arg == "even" {
      &:nth-last-child(#{$arg}):first-child,
      &:nth-last-child(#{$arg}):first-child ~ & {
        @content;
      }
    }

    // Less than...
    @else 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: _to-number(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: _to-number(str-slice($arg, 2));
        &:nth-last-child(n+#{$arg + 1}),
        &:nth-last-child(n+#{$arg + 1}) ~ & {
          @content;
        }
      }
    }
  }
}




// Casts a string into a number (integer only)
// @access private
// @param {String} $value - Value to be parsed
// @return {Number}
// @author @HugoGiraudel - Simplified by @kaelig to only convert unsigned integers
// @link http://hugogiraudel.com/2014/01/15/sass-string-to-number/
@function _to-number($value) {
  $result: 0;
  $digits: 0;
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from 1 through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if not map-get($numbers, $character) {
      @return false;
    }

    @if ($digits == 0) {
      $result: $result * 10 + map-get($numbers, $character);
    } @else {
      $digits: $digits * 10;
      $result: $result + map-get($numbers, $character) / $digits;
    }
  }

  @return $result;
}




div {

  @include quantity(8) {
    /* Exactly 8 */
  }

  @include quantity(8 12) {
    /* At least 8 and at most 12 */
  }
  
  @include quantity(odd) {
    /* Odd quantity */
  }
  
  @include quantity(even) {
    /* Even quantity*/
  }

  @include quantity("<8") {
    /* Less than 8 */
  }

  @include quantity("<=8") {
    /* Less than or equal to 8 */
  }

  @include quantity(">8") {
    /* More than 8 */
  }

  @include quantity(">=8") {
    /* More than or equal to 8 */
  }
}

.parent {
  @include quantity(4) {
    .child {
      /* Match children based on parents' quantity */
    }
  }
}

SassMeister-output.css

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(odd):first-child,
div:nth-last-child(odd):first-child ~ div {
  /* Odd quantity */
}

div:nth-last-child(even):first-child,
div:nth-last-child(even):first-child ~ div {
  /* Even quantity*/
}

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

.parent:nth-last-child(4):first-child .child,
.parent:nth-last-child(4):first-child ~ .parent .child {
  /* Match children based on parents' quantity */
}