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;
}
}
}