Skip to content

Instantly share code, notes, and snippets.

@KittyGiraudel
Last active August 29, 2015 14:22
Show Gist options
  • Save KittyGiraudel/00a0990ce004a5b67989 to your computer and use it in GitHub Desktop.
Save KittyGiraudel/00a0990ce004a5b67989 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
/// Create a compound selector using `:nth-child` to target
/// children that are multiples of `$n`
///
/// @param {Number} $n
///
/// @example scss - Multiples of 3
/// li {
/// @include nth-child-of(3) {
/// background: red;
/// }
/// }
/// @example css - Result
/// li:nth-child(6n + 1), li:nth-child(6n + 2), li:nth-child(6n + 3) {
/// background: red;
/// }
@mixin nth-child-of($n) {
$selector: ();
@for $i from 1 through $n {
$selector: append($selector, '&:nth-child(#{$n * 2n} + #{$i})', 'comma');
}
#{$selector} {
@content;
}
}
li {
@include nth-child-of(3) {
background: red;
}
}
/// Create a unique selector using `:nth-child` and `:not` to target
/// children that are multiples of `$n`
///
/// @param {Number} $n
/// @param {Number} $initial [$n] - Internal only, don't touch
///
/// @example scss - Multiples of 3
/// li {
/// @include r-nth-child-of(3) {
/// background: red;
/// }
/// }
/// @example css - Result
/// li:not(:nth-child(6n + 3)):not(:nth-child(6n + 2)):not(:nth-child(6n + 1)) {
/// background: red;
/// }
@mixin r-nth-child-of($n, $initial: $n) {
@if $n == 0 {
@content;
} @else {
&:not(:nth-child(#{$initial * 2n} + #{$n})) {
@include r-nth-child-of($n - 1, $initial) {
@content;
}
}
}
}
li {
@include r-nth-child-of(3) {
background: red;
}
}
li:nth-child(6n + 1), li:nth-child(6n + 2), li:nth-child(6n + 3) {
background: red;
}
li:not(:nth-child(6n + 3)):not(:nth-child(6n + 2)):not(:nth-child(6n + 1)) {
background: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment