Add first-row last-row mixins

[nirazul]

Thanks for the nice compilation of mixins! I think it would be a cool addition to also implement first-row and last-row mixins displayed in this article.

I occasionally use this mixin for targeting last rows:

/// Targets the last row in a grid of constant column count
/// @link http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/
/// @param {number} $num-cols - The number of columns within the context
///
@mixin last-row($num-cols) {
  $selector: nth(nth(&, 1), length(nth(&, 1)));

  &:nth-child(#{$num-cols}n + 1):nth-last-child(-n + #{$num-cols}),
  &:nth-child(#{$num-cols}n + 1):nth-last-child(-n + #{$num-cols}) ~ #{$selector} {
    @content;
  }
}

/// Usage
///
ul > li {
  @include last-row(2) {
    color: red
  }
}

[danielguillan]

Very interesting. I'll take a look at it. Thanks for the suggestion @Nirazul!

[robsonsobral]

I've found a use for that!

    &:last-child {
      border-bottom: 0;
    }

    @media screen and(min-width: 40.5em) { // 648px
      @include my.last-row(2) {
        border-bottom: 0;
      }
    }

    @media screen and(min-width: 59.25em) { // 948px
      @include my.last-row(3) {
        border-bottom: 0;
      }
    }

[robsonsobral]

@danielguillan , would you accept a PR?

[robsonsobral]

@danielguillan ?

[robsonsobral]

I did some tests.

Based on this article, we could have something like:

ul > li {
    @include first(4) { color: red; }
}

ul > li {
    @include last(6) { color: blue; }
}

ul > li {
    @include last-or-remainder(6) { color: blue; }
}

ul > li:nth-child(-n+4) {
  color: red;
}

ul > li:nth-child(6n+1):nth-last-child(-n+6) {
  color: blue;
}

ul > li:nth-child(6n+1):nth-last-child(-n+6),
ul > li:nth-child(6n+1):nth-last-child(-n+6) ~ li {
  color: blue;
}

However, in these cases the total quantity doesn't matter, so... I'm not sure these mixins have a place in here. I think they do, but I'm not the boss.

[robsonsobral]

Don't you want another PR, @danielguillan ?