Skip to main content

The "Quantity Query" Mixin

You can style an element based on how many siblings it has (e.g., "if there are 4 items, make them (25%) width; if there are 3, make them 33%").

SCSS
@mixin at-least($count) {
  &:nth-last-child(n + #{$count}),
  &:nth-last-child(n + #{$count}) ~ & {
    @content;
  }
}

.menu-item {
  @include at-least(4) { width: 25%; }
}