Quantity Query

Le principe de cette mixin est de permettre d'appliquer un style à des éléments en fonction de leur nombre.

Par exemple :

.class {
    @include quantity-query(4, 'greater') {
      background: red;   
    }
}

ajoutera un background rouge aux éléments .class dés qu'ils y en aura plus de 4.

@mixin quantity-query( $number, $comparison: 'equal' ) {
  $nth: '';
  @if index(('greater' 'more' '>'), $comparison) {
    $nth: 'n + #{$number}';
  } @else if index(('less' 'fewer' '<'), $comparison) {
    $nth: '-n + #{$number}';
  } @else if index(('equal' 'same' '='), $comparison) {
    $nth: $number;
  } @else {
    @warn "Sorry, that’s an invalid $comparison value."
  }

  &:nth-last-child(#{$nth}):first-child {
    &,
    & ~ * {
      @content;
    }
  }
}