Skip to content

Instantly share code, notes, and snippets.

@danielguillan
Last active August 29, 2015 14:16
Show Gist options
  • Save danielguillan/a43e0e11e73d7efaa14d to your computer and use it in GitHub Desktop.
Save danielguillan/a43e0e11e73d7efaa14d to your computer and use it in GitHub Desktop.
Quantity queries mixins
@mixin at-least($count) {
@if type-of($count) != 'number' {
@error '`#{$count}` is not a valid number for at-least() mixin.';
}
@at-root &:nth-last-child(n+#{$count}),
&:nth-last-child(n+#{$count}) ~ * {
@content;
}
}
@mixin at-most($count) {
@if type-of($count) != 'number' {
@error '`#{$count}` is not a valid number for at-most() mixin.';
}
@at-root &:nth-last-child(-n+#{$count}):first-child,
&:nth-last-child(-n+#{$count}):first-child ~ * {
@content;
}
}
@mixin between($first, $last) {
@if $first > $last {
@error '#{$first} can´t be larger that #{$last} for in-between() mixin';
}
@include at-least($first) {
@include at-most($last) {
@content;
}
}
}
.nav li {
// If nav containes 3 items or less, make them green.
@include at-most(3) {
color: green;
}
// If nav containes 6 items or more, make-them red red.
@include at-least(6) {
color: red;
}
// If nav contains between 4 and 6 items, add a blue background.
@include between(4, 6) {
background-color: rgba(blue, .1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment