Skip to content

Instantly share code, notes, and snippets.

@cmpscabral

cmpscabral/nth-child-quantity-mixins.scss

Forked from adamgiese/nth-child-quantity-mixins.scss
Created May 23, 2017 15:13
Show Gist options
  • Save cmpscabral/b4e448d671a876b95fd16d6bfd5d06e1 to your computer and use it in GitHub Desktop.
Save cmpscabral/b4e448d671a876b95fd16d6bfd5d06e1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @adamgiese adamgiese revised this gist May 18, 2017. 1 changed file with 13 additions and 11 deletions.
    24 changes: 13 additions & 11 deletions nth-child-quantity-mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,15 @@
    @mixin valid-quantity($quantity) {
    @if type-of($quantity) != 'number' {
    @error 'The "quantity" parameter must be a number!';
    }
    @if not(unitless($quantity)) {
    @error 'The "quantity" parameter must not have a unit!';
    }
    @if $quantity < 0 {
    @error 'The "quantity" parameter must be at least 0!';
    }
    }

    @mixin has-nth($expression, $element: '*') {
    &:nth-last-child(#{$expression}):first-child,
    &:nth-last-child(#{$expression}):first-child ~ #{$element} {
    @@ -45,14 +57,4 @@
    }
    }

    @mixin valid-quantity($quantity) {
    @if type-of($quantity) != 'number' {
    @error 'The "quantity" parameter must be a number!';
    }
    @if not(unitless($quantity)) {
    @error 'The "quantity" parameter must not have a unit!';
    }
    @if $quantity < 0 {
    @error 'The "quantity" parameter must be at least 0!';
    }
    }

  2. @adamgiese adamgiese revised this gist May 15, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion nth-child-quantity-mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    @mixin has-nth($expression, $element: '*') {
    &:nth-last-child(#{$expression}):first-child,
    &:nth-last-child(#{$expression}):first-child ~ * {
    &:nth-last-child(#{$expression}):first-child ~ #{$element} {
    @content;
    }
    }
  3. @adamgiese adamgiese created this gist May 13, 2017.
    58 changes: 58 additions & 0 deletions nth-child-quantity-mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    @mixin has-nth($expression, $element: '*') {
    &:nth-last-child(#{$expression}):first-child,
    &:nth-last-child(#{$expression}):first-child ~ * {
    @content;
    }
    }

    @mixin at-least($quantity, $element: '*') {
    @include valid-quantity($quantity);
    @include has-nth('n + #{$quantity}', $element) {
    @content;
    }
    }

    @mixin at-most($quantity, $element: '*') {
    @include valid-quantity($quantity);
    @include has-nth('-n + #{$quantity}', $element) {
    @content;
    }
    }

    @mixin divisible-by($quantity, $offset: 0, $element: '*') {
    @include valid-quantity($quantity);
    @include has-nth('#{$quantity}n + #{$offset}', $element) {
    @content;
    }
    }

    @mixin has-exactly($quantity, $element: '*') {
    @include valid-quantity($quantity);
    @include has-nth('#{$quantity}', $element) {
    @content;
    }
    }

    @mixin has-odd($element: '*') {
    @include has-nth('odd', $element) {
    @content;
    }
    }

    @mixin has-even($element: '*') {
    @include has-nth('even', $element) {
    @content;
    }
    }

    @mixin valid-quantity($quantity) {
    @if type-of($quantity) != 'number' {
    @error 'The "quantity" parameter must be a number!';
    }
    @if not(unitless($quantity)) {
    @error 'The "quantity" parameter must not have a unit!';
    }
    @if $quantity < 0 {
    @error 'The "quantity" parameter must be at least 0!';
    }
    }