SCSS Quantity Queries

@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; } } } @mixin qq-equal( $number ) { @include quantity-query( $number, equal ) { @content; } } @mixin qq-greater( $number ) { @include quantity-query( $number, greater ) { @content; } } @mixin qq-less( $number ) { @include quantity-query( $number, less ) { @content; } }

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.