Sass mixins to make CSS nth-child selectors easier to work with

nth-child-mixins.scss

// Select the first nth elements
@mixin first($number) {
  @if $number == 1 {
    &:first-child {
      @content;
    }
  }
  @else {
    &:nth-child(-n + ${$number}) {
      @content;
    }
  }
}

// Select the last nth elements
@mixin last($number) {
  &:nth-child(-n + #{$number}) {
    @content;
  }
}

// Select all after nth element
@mixin after($number) {
  &:nth-child(n + ${$number + 1}) {
    @content;
  }
}

// Select every nth element
@mixin every($number) {
  &:nth-child(#{$number}n)) {
    @content;
  }
}